Question

我希望能够使用变量更改使用dimple.js制作的图表类型。我可以使用局部变量来手动设置，感谢这篇文章：change chart type in dimple.js to automate chart production

但是，当我试图更进一步并将所有变量放在配置文件中时，它不再起作用了。我很确定我错过了＆＃34;对象＆＃34;，但无法弄清楚是什么。

很抱歉，这可能是一个显而易见的问题，但我是一名数据分析师，而不是开发人员和d3.js和dimple.js的新手。

我的代码:(见下文）http://plnkr.co/McEDMkovXaQpsn5z9mmV 我已经放了2个html页面：＆＃34; Manual＆＃34;是它与手动声明的局部变量一起使用的地方。＆＃34;动态＆＃34;是相同的代码，除了我将变量放在配置文件中，我使用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>

Answer 1

我很难让这个例子正常工作，很多文件做很多事情。我认为基本问题是当您导入dsv配置文件时，您的组仍然会以"["Month", "Channel"]"之类的字符串形式返回。当你将它传递给chart.addCategoryAxis时，它会像字符串而不是数组一样看待它。你应该可以做到

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

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

另外一些我不认为在该网站上工作的代码，因为它仍在寻找不存在的数据/目录中的静态dsv / csv文件，但我认为字符串/数组问题可能是一个人抱着你。

使用配置文件自动化dimple.js图表

1 个答案: