时间序列数据的堆积面积图

Question

假设我有以下时间序列数据

Date    A   B
2013    100.5605895 200.2631216
2014    100.9491154 200.7340505
2015    100.9897489 200.6443121
2016    100.4639869 200.3362392
2017    100.9213508 200.9948514

现在我想在 B 的顶部创建一个 A 的堆叠时间序列图，如 https://krispo.github.io/angular-nvd3/0.x/#/stackedAreaChart

有什么方法可以实现与 amCharts 相同的效果吗？

Answer 1

这是我们 100% stacked area chart demo 的分支，它使用您提供的数据（在这种情况下，您可以使用类别轴而不是日期轴，除非您确实需要日期，注意我将年份更改为下面的字符串):

https://codepen.io/team/amcharts/pen/c5e3b7104d4bf0b1a417f7d6c52c95b7

如果先给B设置系列，那么A会出现在B上面

chart.data = [
  {"year": "2013",    "A": 100.5605895, "B": 200.2631216, },
  {"year": "2014",    "A": 100.9491154, "B": 200.7340505, },
  {"year": "2015",    "A": 100.9897489, "B": 200.6443121, },
  {"year": "2016",    "A": 100.4639869, "B": 200.3362392, },
  {"year": "2017",    "A": 100.9213508, "B": 200.9948514, },
];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";

var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Value";

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "B";
series.dataFields.categoryX = "year";
series.name = "B";

var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "A";
series2.dataFields.categoryX = "year";
series2.name = "A";

希望对您有所帮助。

时间序列数据的堆积面积图

Stacked Area Chart on time series data

javascript

amcharts

amcharts4