Question

我想使用dimple.js在一个图表中打印两个面积图。我是这样做的：

var svg = dimple.newSvg("#chart", svgWidth, svgHeight);
var chart = new dimple.chart(svg, data);
var xAxis = chart.addCategoryAxis("x", "DayOfMonth");
xAxis.title = null;
xAxis.addOrderRule("Date");
var yAxis = chart.addMeasureAxis("y", "Amount");
yAxis.title = null;

var series = chart.addSeries("Type", dimple.plot.area);
series.interpolation = "cardinal";
chart.draw();

这是我创建的JSFiddle：http://jsfiddle.net/7LoLLkfp/1/

问题在于这两个图表是彼此之上的。当你查看DayOfMonth 20的最后一个值时，视图应该是6，Likes应该是4.在我的情况下，喜欢的是6 + 4 = 10。

如何在一个图表中正确绘制两个区域图表而不将它们叠加在一起？

Answer 1

将series.stacked设置为false，例如

var series = chart.addSeries("Type", dimple.plot.area);
series.interpolation = "cardinal";
series.stacked = false;
chart.draw();

如果要更改订单设置addOrderRule

series.addOrderRule(["Views", "Likes"]);

或

series.addOrderRule(["Likes", "Views"]);

Answer 2

我认为问题在于使用堆积面积图。要显示该区域，它将叠加一个在另一个之上。您最好使用不同的图表类型，例如line

在一个图表中打印两个区域图表而不将它们叠加在一起？

2 个答案: