时间戳

首页 > 解决方案 > 悬停时在amcharts 4中堆叠单列

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

问题描述

请检查此stackblitz链接

在悬停时，您可以看到具有不同计数的工具提示，我想在悬停时显示堆叠列，像这样 这个我尝试在第一个系列的“结束”事件上创建第二个系列（在代码中可以看到相同），但它不工作。

有没有办法在 amcharts 中实现这一点？

标签： angulartypescriptecmascript-6amchartsamcharts4

解决方案

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

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');

并添加一个悬停状态，当您悬停一列时应用它：

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>

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

在此处输入图像描述

您可能需要考虑更多的事情：

  • 要将阴影添加到悬停状态，您可以创建一个过滤器并添加一个DropShadowFilter
  • 为了改进您的工具提示，您可以查看chart.tooltipHTML或遵循本教程
  • 我不建议使用series2.columns.template.width = am4core.percent(100);，因为这会导致一些重叠的 SVG 错误：

在此处输入图像描述

推荐阅读