javascript - 如何/是否可以在 amcharts 中创建堆叠区域和折线图的组合

Question

我正在创建一个结合堆叠区域和折线图的图表。我想知道在 amcharts 4 中是否真的可以创建这样的组合。

我浏览了文档，找不到任何方法来创建堆叠面积和线条的组合图表。

我期待的输出是这样的：

Answer 1

不太确定您是否想要图像中显示的此输出，但是是的，您可以放多少就放多少，只需添加var series = chart.series.push(new am4charts.LineSeries());它以声明一个新系列

使用series.fill = am4core.color("#e59165");' and 'series.fillOpacity = 0.5;它将为该区域提供颜色，series2.strokeWidth = 3;以自定义线条的粗细。看看这个例子：

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_dark);
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart
var chart = am4core.create("chartdiv", am4charts.XYChart);

var data = [];
var price1 = 1000, price2 = 1200, price3 = 500;
var quantity = 30000;
for (var i = 0; i < 360; i++) {
  price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
  data.push({ date1: new Date(2015, 0, i), price1: price1 });
}
for (var i = 0; i < 360; i++) {
  price2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
  data.push({ date2: new Date(2017, 0, i), price2: price2 });
}
for (var i = 0; i < 360; i++) {
  price3 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
  data.push({ date3: new Date(2017, 0, i), price3: price3 });
}

chart.data = data;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.labels.template.fill = am4core.color("#e59165");

var dateAxis2 = chart.xAxes.push(new am4charts.DateAxis());
dateAxis2.renderer.grid.template.location = 0;
dateAxis2.renderer.labels.template.fill = am4core.color("#dfcc64");

var dateAxis3 = chart.xAxes.push(new am4charts.DateAxis());
dateAxis3.renderer.grid.template.location = 0;
dateAxis3.renderer.labels.template.fill = am4core.color("#dfcc64");

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#e59165");
valueAxis.renderer.minWidth = 60;

var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.grid.template.strokeDasharray = "2,3";
valueAxis2.renderer.labels.template.fill = am4core.color("#dfcc64");
valueAxis2.renderer.minWidth = 60;

var valueAxis3 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis3.tooltip.disabled = true;
valueAxis3.renderer.grid.template.strokeDasharray = "2,3";
valueAxis3.renderer.labels.template.fill = am4core.color("#dfcc64");
valueAxis3.renderer.minWidth = 60;

var series = chart.series.push(new am4charts.LineSeries());
series.name = "2015";
series.dataFields.dateX = "date1";
series.dataFields.valueY = "price1";
series.tooltipText = "{valueY.value}";
series.fill = am4core.color("#e59165");
series.stroke = am4core.color("#e59165");
series.strokeWidth = 3;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "2017";
series2.dataFields.dateX = "date2";
series2.dataFields.valueY = "price2";
series2.yAxis = valueAxis2;
series2.xAxis = dateAxis2;
series2.tooltipText = "{valueY.value}";
series2.fillOpacity = 0.5;
//series2.strokeWidth = 3;

var series3 = chart.series.push(new am4charts.LineSeries());
series3.name = "2019";
series3.dataFields.dateX = "date3";
series3.dataFields.valueY = "price3";
series3.yAxis = valueAxis3;
series3.xAxis = dateAxis3;
series3.tooltipText = "{valueY.value}";
series3.fillOpacity = 0.5;

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis2;

var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;

chart.legend = new am4charts.Legend();
chart.legend.parent = chart.plotContainer;
chart.legend.zIndex = 100;

valueAxis2.renderer.grid.template.strokeOpacity = 0.07;
dateAxis2.renderer.grid.template.strokeOpacity = 0.07;
dateAxis.renderer.grid.template.strokeOpacity = 0.07;
valueAxis.renderer.grid.template.strokeOpacity = 0.07;

}); // end am4core.ready()

body { background-color: #30303d; color: #fff; }
#chartdiv {
  width: 100%;
  height: 500px;
}

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<!-- HTML -->
<div id="chartdiv"></div>

Answer 2

我不确定是否完全理解旅游问题，但也许您正在寻找类似这支笔的东西？要堆叠你必须使用的lineseries

series.stacked=true/false;

https://codepen.io/Ices_Eyes/pen/vwoxJb