如何在 Amchart 的堆叠 LineSeries 中更改光标样式

Question

我知道如何在 ColumnSeries 和 PieSeries 中更改它们，通过：

series.slices.template.cursorOverStyle = am4core.MouseCursorStyle.pointer

或

series.columns.template.cursorOverStyle = am4core.MouseCursorStyle.pointer

但我无法让它在堆叠的 LineSeries 中工作。

Answer 1

您需要在 LineSeries 的 segments 模板上进行设置。这还需要在其上启用交互，因为默认情况下它们是禁用的：

series.segments.template.interactionsEnabled = true;
series.segments.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;

演示：

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

chart.data = [{
  "year": "1994",
  "cars": 1587,
  "motorcycles": 650,
  "bicycles": 121
}, {
  "year": "1995",
  "cars": 1567,
  "motorcycles": 683,
  "bicycles": 146
}, {
  "year": "1996",
  "cars": 1617,
  "motorcycles": 691,
  "bicycles": 138
}, {
  "year": "1997",
  "cars": 1630,
  "motorcycles": 642,
  "bicycles": 127
}, {
  "year": "1998",
  "cars": 1660,
  "motorcycles": 699,
  "bicycles": 105
}, {
  "year": "1999",
  "cars": 1683,
  "motorcycles": 721,
  "bicycles": 109
}, {
  "year": "2000",
  "cars": 1691,
  "motorcycles": 737,
  "bicycles": 112
}, {
  "year": "2001",
  "cars": 1298,
  "motorcycles": 680,
  "bicycles": 101
}, {
  "year": "2002",
  "cars": 1275,
  "motorcycles": 664,
  "bicycles": 97
}, {
  "year": "2003",
  "cars": 1246,
  "motorcycles": 648,
  "bicycles": 93
}, {
  "year": "2004",
  "cars": 1318,
  "motorcycles": 697,
  "bicycles": 111
}, {
  "year": "2005",
  "cars": 1213,
  "motorcycles": 633,
  "bicycles": 87
}, {
  "year": "2006",
  "cars": 1199,
  "motorcycles": 621,
  "bicycles": 79
}, {
  "year": "2007",
  "cars": 1110,
  "motorcycles": 210,
  "bicycles": 81
}, {
  "year": "2008",
  "cars": 1165,
  "motorcycles": 232,
  "bicycles": 75
}, {
  "year": "2009",
  "cars": 1145,
  "motorcycles": 219,
  "bicycles": 88
}, {
  "year": "2010",
  "cars": 1163,
  "motorcycles": 201,
  "bicycles": 82
}, {
  "year": "2011",
  "cars": 1180,
  "motorcycles": 285,
  "bicycles": 87
}, {
  "year": "2012",
  "cars": 1159,
  "motorcycles": 277,
  "bicycles": 71
}];

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

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.categoryX = "year";
series.name = "cars";
series.dataFields.valueY = "cars";
series.tooltipText = "[#000]{valueY.value}[/]";
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;
series.segments.template.interactionsEnabled = true;
series.segments.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "motorcycles";
series2.dataFields.categoryX = "year";
series2.dataFields.valueY = "motorcycles";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;
series2.segments.template.interactionsEnabled = true;
series2.segments.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;

var series3 = chart.series.push(new am4charts.LineSeries());
series3.name = "bicycles";
series3.dataFields.categoryX = "year";
series3.dataFields.valueY = "bicycles";
series3.tooltipText = "[#000]{valueY.value}[/]";
series3.fillOpacity = 0.6;
series3.stacked = true;
series3.strokeWidth = 2;
series3.segments.template.interactionsEnabled = true;
series3.segments.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;

chart.cursor = new am4charts.XYCursor();

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

如何在 Amchart 的堆叠 LineSeries 中更改光标样式

How to change cursor style in Amchart's stacked LineSeries

amcharts

amcharts4