我是菜鸟，目前正在练习 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>
最佳答案
编辑:我清理了代码，以帮助您在以后的工作中更易于维护。
--
所以问题出在变量命名上。你正在覆盖你的变量。在第二个声明中，您想要更改新酒窝 svg 的名称，例如而不是命名它:
var svg = dimple.newSvg("#chartContainer2", 590, 400);
命名:
var svg2 = dimple.newSvg("#chartContainer2", 590, 400);
此外，请确保您继续正确引用变量。
我在这里为您制作了一个快速的 JsFiddle:http://jsfiddle.net/fq4p7t2x/
关于javascript - 表示 2 个或更多 dimple.js 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29711341/