dimple.js图表​​的自动化与配置文件(automation of dimple.js cha

2019-10-21 02:19发布

我希望能够改变图表的使用变量dimple.js所做的类型。 我能够使用本地变量,手动设置做到这一点,得益于这个帖子: 在dimple.js自动化海图制作改变图表类型

然而,当我试图向前迈进一步,并把我在配置文件中的所有变量,但它不再工作了。 我敢肯定,我的思念与“物”的东西,但找不出什么。

对不起,可能是我缺少一个明显的事情,但我是一个数据分析师,而不是开发商和有关d3.js和dimple.js相当的新秀。

我的代码(见下文) http://plnkr.co/McEDMkovXaQpsn5z9mmV我已经把2个HTML页面:“手册”是它与手动声明的局部变量的作品。 “动态”是相同的代码除了我已经把变量在配置文件中,并予读取使用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文件,但我认为字符串/数组的问题可能是一个抱着你起来。



文章来源: automation of dimple.js charts with a configuration file
标签: dimple.js