代表 2 个或更多 dimple.js 个图表

Question

我是菜鸟，目前正在练习 dimple.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>

Answer 1

编辑：我清理了代码，以帮助您在以后的工作中更易于维护。

http://jsfiddle.net/gv615hcL/

--

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

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

命名：

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

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

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

代表 2 个或更多 dimple.js 个图表

Representing 2 or more dimple.js charts

javascript

jquery

dimple.js