时间戳

首页 > 解决方案 > 时间序列数据的堆积面积图

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

问题描述

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

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

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

有什么办法可以达到同样的效果amCharts吗？

标签： javascriptamchartsamcharts4

解决方案

这是我们的100% 堆积面积图演示的一个分支，它使用您提供的数据（在这种情况下，您可以使用类别轴而不是日期轴，除非您真的需要日期，请注意我将年份更改为下面的字符串）：

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";

希望这可以帮助。

推荐阅读