ECharts：对图例禁用默认的单击操作 [英] ECharts: Disable default click action on legends

问题描述

我正在尝试使用ECharts绘制一个我已经能够做的简单的甜甜圈图。默认情况下，我注意到图例会在图表上被隐藏。

I'm trying to use ECharts to render a simple doughnut chart which I've been able to do. I've noticed by default that the legend will hide the data item on the chart if it is clicked.

我希望用户能够选择图例来执行我可以使用可用事件（ https://ecomfe.github.io/echarts-doc/public/en/api.html#events.legendselected ），但是我想防止在图表上隐藏/显示数据项的默认行为

I want the user to be able to select the legend to do something (fire an event) which I can do using the events available (https://ecomfe.github.io/echarts-doc/public/en/api.html#events.legendselected) however I want to prevent the default behaviour of hiding/showing the data item on the chart.

在文档中提到了图例中的一个名为selectedMode的属性（ https://ecomfe.github.io/echarts-doc/public/en/option.html#legend.selectedMode ），

In the documentation there is mention of a property on the legend called selectedMode (https://ecomfe.github.io/echarts-doc/public/en/option.html#legend.selectedMode), which prevents the toggling of the series, but it also stops the legend from being selectable entirely.

我还尝试过为传奇人物触发的事件返回false

I've also tried returning false on the events fired for legendselected and legendunselected but to no success.

有人能找到阻止这种行为的方法吗？感谢您在此问题上的任何帮助。

Has anyone found a way of stopping this behaviour? I'd appreciate any help on this issue.

这里是一个小提琴，其中包含将selectedMode设置为false的内容。删除此标志可查看默认行为：

Here is a fiddle which contains the selectedMode set to false. Remove this flag to see the default behaviour:

legend: {
  orient: "vertical",
  x: "right",
  selectedMode: false,
  data: data.map(d => d.name)
}

https://jsfiddle.net/h44jpmpf/12 /

推荐答案

一种解决方法是调度 legendSelect legendselectchanged 事件处理程序中的操作，以重新选择用户单击的选项。您可能需要关闭动画，以防止跳动的视觉效果切换数据集。

One workaround is to dispatch the legendSelect action in a legendselectchanged event handler to re-select the option that the user clicks. You may want to toggle animations off to prevent jumpy visuals from toggling the data set.

jsfiddle

myChart.on('legendselectchanged', function(params) {

  suppressSelection(myChart, params);  

  // Add custom functionality here 
});

function suppressSelection(chart, params) {
  chart.setOption({ animation: false });

  // Re-select what the user unselected
  chart.dispatchAction({
    type: 'legendSelect',
    name: params.name
  });   

  chart.setOption({ animation: true });
}

这篇关于ECharts：对图例禁用默认的单击操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！