在一张图表中打印两个面积图而不将它们堆叠在一起？

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，点赞次数应为 4。在我的例子中，点赞次数为 6 + 4 = 10。

如何在一张图中正确绘制两个面积图而不将它们堆叠在一起？

Answer 1

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

Answer 2

将 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"]);

在一张图表中打印两个面积图而不将它们堆叠在一起？

Print two area charts in one diagram without stacking them above each other?

html

javascript

svg

d3.js

dimple.js