代表 2 个或更多酒窝.js图表

我是一个菜鸟，目前我正在练习酒窝.js。

我

面临的问题是我不能在同一页面上并排表示 2 个图表，它只显示一个图表。我该如何解决这个问题？

我用两个不同的 ID 命名每个div，并在脚本中考虑了这一点。

    <body>

<section>
 <div id="chartContainer1" class="container">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer1", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 505, 305);
      var x = myChart.addCategoryAxis("x", "Month");
      x.addOrderRule("Date");
      myChart.addMeasureAxis("y", "Unit Sales");
      var s = myChart.addSeries("Channel", dimple.plot.line);
      s.interpolation = "cardinal";
      myChart.addLegend(60, 10, 500, 20, "right");
      myChart.draw();
    });
  </script>
</div>

<div id="chartContainer2" class="container">
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer2", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 505, 305);
      var x = myChart.addCategoryAxis("x", "Month");
      x.addOrderRule("Date");
      myChart.addMeasureAxis("y", "Unit Sales");
      var s = myChart.addSeries("Channel", dimple.plot.line);
      s.interpolation = "cardinal";
      myChart.addLegend(60, 10, 500, 20, "right");
      myChart.draw();
    });
  </script>
</div>

</section>

编辑：我清理了代码，以帮助使其更易于维护。

http://jsfiddle.net/gv615hcL/

所以问题出在变量命名上。您正在覆盖变量。例如，在第二个声明中，您希望更改新酒窝 svg 的名称，而不是命名它：

var svg = dimple.newSvg("#chartContainer2", 590, 400);

命名它：

var svg2 = dimple.newSvg("#chartContainer2", 590, 400);

此外，请确保继续正确引用变量。

我在这里为您制作了一个快速的 JsFiddle：http://jsfiddle.net/fq4p7t2x/

相关内容

最新更新

热门标签：