Question

我正在尝试在折线图中的图例上放置一个“结束”事件。在悬停图例时，我试图突出显示与图例关联的特定行

我已经看过一些示例https://www.amcharts.com/docs/v4/tutorials/highlighting-column-series-on-legend-click/和https://www.amcharts.com/docs/v4/tutorials/activate-deactivate-a-pie-slice-on-legend-click-instead-of-toggling/

并且我正在尝试在“鼠标悬停”图例上模拟折线图。

chart.legend = new am4charts.Legend();
chart.legend.markers.template.width = 40;
chart.legend.markers.template.height = 10;

chart.legend.itemContainers.template.events.on("over", function(ev) {
            console.log(ev.target.dataItem.dataContext);
            console.log(ev.target.dataItem.dataContext.segments.template);
            let lineSeries = ev.target.dataItem.dataContext.segments.template;
           lineSeries.isActive = !lineSeries.isActive;

        });

我无法在输出中获取“ isActive”键。我可以在控制台日志中看到“ isBaseSprite：false”，“ isHiding：false”，“ isShowing：false”。但是没有像柱形图和饼形图那样存在“ isActive”。

我不确定自己在做什么错。这是折线图的正确方法吗？

Answer 1

我已使用here中提供的示例创建了一个图表。我已经对其进行了更改，使其现在成为堆积的面积图。

我花了一段时间才找出问题所在：仅将columns替换为segments在这里行不通。在createSeries函数中，您需要这两行：

series.fillOpacity = 0.6; 
series.segments.template.fillOpacity = 0.6;

第一个用于图表首次部署时，第二个用于响应已定义的hoverState：

var hoverState = series.segments.template.states.create("active");
hoverState.properties.fillOpacity = 1;

我不确定这是否是错误。我要在amCharts的GitHub存储库中提交问题。

这是完整的代码：

// Apply chart themes
am4core.useTheme(am4themes_animated);

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

// Add data
chart.data = [{
  "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}, {
  "country": "Czech Republic",
  "research": 301.9,
  "marketing": 222,
  "sales": 251
}, {
  "country": "Ireland",
  "research": 201.1,
  "marketing": 170,
  "sales": 199
}, {
  "country": "Germany",
  "research": 165.8,
  "marketing": 122,
  "sales": 90
}, {
  "country": "Australia",
  "research": 139.9,
  "marketing": 99,
  "sales": 252
}, {
  "country": "Austria",
  "research": 128.3,
  "marketing": 85,
  "sales": 84
}, {
  "country": "UK",
  "research": 99,
  "marketing": 93,
  "sales": 142
}, {
  "country": "Belgium",
  "research": 60,
  "marketing": 50,
  "sales": 55
}, {
  "country": "The Netherlands",
  "research": 50,
  "marketing": 42,
  "sales": 25
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

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

function createSeries(field, name) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "country";
  series.strokeWidth = 2;
  series.yAxis = valueAxis;
  series.name = name;
  series.tooltipText = "{name}: [bold]{valueY}[/]";
  series.tensionX = 0.8;
  series.stacked = true;

  // ********************************************************
  // Both lines are needed!
  // The 1st line makes the segments transparent when the chart
  // initializes. The effect of the second line is for when the
  // hovering over the legend occurs.
  series.fillOpacity = 0.6;
  series.segments.template.fillOpacity = 0.6;
  // ********************************************************

  var hoverState = series.segments.template.states.create("active");
  hoverState.properties.fillOpacity = 1;

  return series;
}

createSeries("sales", "Sales");
createSeries("research", "Research");
createSeries("marketing", "Martketing");

// Add legend
chart.legend = new am4charts.Legend();

// Disable toggling of slices
// chart.legend.itemContainers.template.togglable = false;

// Add 'over' & 'out' events to highlight the segments on hover
chart.legend.itemContainers.template.events.on("over", function(e) {
  var seg = e.target.dataItem.dataContext.segments.template;
  seg.isActive = !seg.isActive;
});
chart.legend.itemContainers.template.events.on("out", function(e) {
  var seg = e.target.dataItem.dataContext.segments.template;
  seg.isActive = !seg.isActive;
});

<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/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv" style="height: 400px"></div>

Amcharts4：突出显示图例悬停时的线条系列

1 个答案: