在悬停时在 amcharts 4 中堆叠单列

Question

请检查这个stackblitzlink

在悬停时您可以看到带有不同计数的工具提示，我想在悬停时显示堆叠的列，类似这样我已经尝试在 'over' 事件上创建第二个系列第一个系列（同样可以在代码中看到），但它不起作用。

有没有办法在 amcharts 中实现这个？

Answer 1

首先，您应该为每个数据值创建一个包含多个系列的 "normal" 堆积柱形图：

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "error"; // "pass", ...
series.dataFields.dateX = "date";
series.name = "Research";
series.stacked = true;

如果可行，您可以将所有系列的 fill 和 stroke 颜色设置为相同的值：

series.fill = am4core.color('#ececec');
series.stroke = am4core.color('#ececec');

并添加一个 hover state，当您将鼠标悬停在一列时应用：

let hoverState = series.columns.template.states.create("hover");
hoverState.properties.stroke = am4core.color("red"); // change the color for each series
hoverState.properties.fill = am4core.color("red"); // change the color for each series

完整示例如下：

am4core.useTheme(am4themes_animated);

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

chart.data = [{
  'date': new Date(2019, 4, 1),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 2),
  'itrCount': 75,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 3),
  'itrCount': 80,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 4),
  'itrCount': 250,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 5),
  'itrCount': 150,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 6),
  'itrCount': 180,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 7),
  'itrCount': 95,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 8),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 9),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 10),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 11),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 12),
  'itrCount': 47,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 13),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 14),
  'itrCount': 75,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 15),
  'itrCount': 80,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 16),
  'itrCount': 250,
  'pass': 35,
  'error': 10
}, {
  'date': new Date(2019, 4, 17),
  'itrCount': 150,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 18),
  'itrCount': 180,
  'pass': 50,
  'error': 10
}, {
  'date': new Date(2019, 4, 19),
  'itrCount': 95,
  'pass': 30,
  'error': 10
}, {
  'date': new Date(2019, 4, 20),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 21),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 22),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 23),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 24),
  'itrCount': 47,
  'pass': 25,
  'error': 10
}, {
  'date': new Date(2019, 4, 25),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 26),
  'itrCount': 75,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 27),
  'itrCount': 80,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 28),
  'itrCount': 250,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 29),
  'itrCount': 150,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 30),
  'itrCount': 180,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 31),
  'itrCount': 95,
  'pass': 10,
  'error': 10
}];

const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.minGridDistance = 0;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.startLocation = 0;
dateAxis.endLocation = 1;
dateAxis.dateFormats.setKey('day', 'dd');
dateAxis.cursorTooltipEnabled = false;

const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.cursorTooltipEnabled = false;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "error";
series.dataFields.dateX = "date";
series.name = "Research";
series.stacked = true;
series.fill = am4core.color('#ececec');
series.stroke = am4core.color('#ececec');

let hoverState = series.columns.template.states.create("hover");
hoverState.properties.stroke = am4core.color("red");
hoverState.properties.fill = am4core.color("red");

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "pass";
series2.dataFields.dateX = "date";
series2.name = "Marketing";
series2.stacked = true;
series2.fill = am4core.color('#ececec');
series2.stroke = am4core.color('#ececec');

let hoverState2 = series2.columns.template.states.create("hover");
hoverState2.properties.stroke = am4core.color("green");
hoverState2.properties.fill = am4core.color("green");

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "itrCount";
series3.dataFields.dateX = "date";
series3.name = "Sales";
series3.stacked = true;
series3.fill = am4core.color('#ececec');
series3.stroke = am4core.color('#ececec');

let hoverState3 = series3.columns.template.states.create("hover");
hoverState3.properties.stroke = am4core.color("blue");
hoverState3.properties.fill = am4core.color("blue");

series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color('#fff');
series3.tooltip.label.fill = am4core.color('#000');
series3.columns.template.tooltipY = 0;
series3.columns.template.tooltipText = 'Series: {name}\nDate: {date}\nCount: {itrCount}\nPass: {pass}\nFail: {error}';

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

您还可以分叉和编辑 this 码笔。这是结果的屏幕截图：

您可能需要考虑更多事项：

要将阴影添加到悬停状态，您可以创建 filter and add a DropShadowFilter
要改进您的工具提示，请看一下 chart.tooltipHTML or follow this tutorial
我不建议使用 series2.columns.template.width = am4core.percent(100);，因为这会导致一些重叠的 SVG 错误：

在悬停时在 amcharts 4 中堆叠单列

Stacking single column in amcharts 4 on hover

amcharts

typescript

ecmascript-6

angular

amcharts4