使用配置文件实现了酒窝.js图表的自动化

我希望能够使用变量更改用小酒窝.js制作的图表类型。我能够使用手动设置的局部变量来完成这项工作，这要归功于这篇文章：在deplet.js中更改图表类型以自动生成图表

然而，当我试图更进一步，将所有变量放在配置文件中时，它就不再起作用了。我很确定我遗漏了一些"对象"，但不知道是什么。

抱歉，这可能是我明显遗漏的一件事，但我是一名数据分析师，而不是开发人员，在d3.js和酒窝.js方面还是个新手。

我的代码：（见下文）http://plnkr.co/McEDMkovXaQpsn5z9mmV我放了两个html页面："Manual"是它使用手动声明的局部变量的地方。"Dynamic"是相同的代码，只是我把变量放在了一个配置文件中，并使用D3.csv函数（一个折线图）读取了配置文件。它不起作用。

谢谢你的帮助！

代码：http://plnkr.co/McEDMkovXaQpsn5z9mmV

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
        <script type="text/javascript" src="script.js"</script>
    </head>

<body>

<div id="chartContainer">
  <script type="text/javascript">

    var chartType1 = "bar";
    var chartDimple1 = dimple.plot[chartType1];
    var chartSerie1 = "Channel";
    var chartGroup1 = ["Month", "Channel"];
    var chartMeasure1 = "Unit Sales";
    var filterField1 = "Owner";
    var filterValues1 = ["Aperture", "LexCorp"];
    var svg1 = dimple.newSvg("#chartContainer", 590, 400);
    d3.csv("data.csv", function (data1) { //d3.tsv("data/example_data.tsv", function (data) {
    var data1 = dimple.filterData(data1, filterField1, filterValues1) // dataFiltered = dimple.filterData(data, "Owner", ["Aperture", "LexCorp"])
      var myChart1 = new dimple.chart(svg1, data1);
      myChart1.setBounds(60, 30, 510, 305)
      var x1 = myChart1.addCategoryAxis("x", chartGroup1); // var x = myChart.addCategoryAxis("x", ["Channel" , "Month"]);
      x1.addOrderRule("Date");
      var y1 = myChart1.addMeasureAxis("y", chartMeasure1);
      myChart1.addSeries(chartSerie1, chartDimple1); // myChart.addSeries("Channel", dimple.plot.bar);
      myChart1.addLegend(60, 10, 510, 20, "right");
      myChart1.draw();
    });

  </script>
</div>

<div id="chart2"></div>
<div id="chart3"></div>
  <script type="text/javascript">
    pageLayout(configFile);
  </script>
</body>
</html>

我很难让这个例子发挥作用，很多文件做了很多事情。我认为基本问题是，当您导入dsv配置文件时，您的组仍然返回为类似"["Month", "Channel"]"的字符串。当你把它传递给chart.addCategoryAxis时，它会把它看作一个字符串，而不是一个数组。你应该能够做

chart.addCategoryAxis(JSON.parse(d.chartGroup));

并将其正确设置为数组。只有当你知道它将是一个数组，如果它可能只是一个字符串，你需要事先检查一下，知道是否需要解析它，这才有效。

此外，我认为有些代码在该网站上不起作用，因为它仍在数据/目录中寻找不存在的静态dsv/csv文件，但我认为字符串/数组问题可能是阻碍你的原因。

相关内容

最新更新

热门标签：