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

我已经看过一些示例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”。

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

最佳答案

我已经使用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>

关于javascript - Amcharts4:突出显示图例悬停时的线条系列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56932707/

10-11 12:47
查看更多