Javascript 表示两个或多个dimple.js图表_Javascript_Jquery_Dimple.js

Javascript 表示两个或多个dimple.js图表

javascript jquery

Javascript 表示两个或多个dimple.js图表,javascript,jquery,dimple.js,Javascript,Jquery,Dimple.js,我是一个noob，目前正在使用dimple.js进行练习我面临的问题是，我不能在同一页上并排表示两个图表，它只显示一个图表。我怎样才能解决这个问题我用两个不同的ID给每个div命名，并在脚本中考虑了这一点 <body> <section> <div id="chartContainer1" class="container"> <script type="text/javascript"> var svg = dim

我是一个noob，目前正在使用dimple.js进行练习

我面临的问题是，我不能在同一页上并排表示两个图表，它只显示一个图表。我怎样才能解决这个问题

我用两个不同的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>


var svg=dimple.newSvg（“#chartContainer1”，590400）；
d3.tsv（“/data/example_data.tsv”），函数（数据）{
数据=酒窝.过滤器数据（数据，“所有者”，“光圈”，“黑色台面]）
var myChart=new dimple.chart（svg，数据）；
我的图表.挫折（60,30,505,305）；
var x=myChart.addCategoryAxis（“x”，“月”）；
x、 addOrderRule（“日期”）；
myChart.addMeasureAxis（“y”，“单位销售额”）；
var s=myChart.addSeries（“通道”、酒窝、绘图、线条）；
s、 插值=“基数”；
myChart.addLegend（60,10500,20，“右”）；
myChart.draw（）；
});
var svg=dimple.newSvg（“#chartContainer2”，590400）；
d3.tsv（“/data/example_data.tsv”），函数（数据）{
数据=酒窝.过滤器数据（数据，“所有者”，“光圈”，“黑色台面]）
var myChart=new dimple.chart（svg，数据）；
我的图表.挫折（60,30,505,305）；
var x=myChart.addCategoryAxis（“x”，“月”）；
x、 addOrderRule（“日期”）；
myChart.addMeasureAxis（“y”，“单位销售额”）；
var s=myChart.addSeries（“通道”、酒窝、绘图、线条）；
s、 插值=“基数”；
myChart.addLegend（60,10500,20，“右”）；
myChart.draw（）；
});

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

所以问题在于变量的命名。您正在重写您的变量。在第二个声明中，您希望更改新dimple svg的名称，例如，而不是命名它：

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

命名为：

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

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

我在这里为您快速打了个招呼：

谢谢！我真的很感谢你的帮助（特别是现在我已经开始了）