Javascript Chart.js：通过单击图例隐藏系列

我正在开发一个使用chart.js（www.chartjs.org）的网站

我必须制作一个显示多系列数据的折线图，用户可以通过单击相应的图例符号（类似于此）隐藏或显示该折线图

---

用chartjs有什么办法吗？

我找不到办法。在图例模板上放置一些onclick行为很容易，您可以轻松地将序列笔划和颜色alpha通道更改为0，以便区域和笔划消失，但我没有找到在点上执行此操作的方法

我决定在这个特殊的图表上使用谷歌图表，只要我不需要这种行为，就使用chart.js，希望chart.js的优秀创建者将来会添加它。

你可以试试这个
为隐藏的数据集创建存储

window.chartName = new Chart(...

window.chartName.store = new Array();

然后使用此功能更新图表，必须通过单击图例项进行处理

function updateDataset(legendLi, chart, label) {
      var store = chart.store;
      var exists = false;
      for (var i = 0; i < store.length; i++) {
        if (store[i][0] === label) {
          exists = true;
          chart.datasets.push(store.splice(i, 1)[0][1]);
          legendLi.fadeTo("slow", 1);
        }
      }
      if (!exists) {
        for (var i = 0; i < chart.datasets.length; i++) {
          if (chart.datasets[i].label === label) {
            chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
            legendLi.fadeTo("slow", 0.33);
          }
        }
      }
      chart.update();
    }

函数更新数据集（legendLi、图表、标签）{
var store=chart.store；
var=false；
对于（变量i=0；i

不要忘记图表选项中更新的图例模板

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

legendTemplate:“
”

很快，我为li组件添加了这个onclick处理程序

<li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName , '<%=datasets[i].label%>')\"><

<

比如说

---

dxcharts有一个名为onLegendClick的函数，其他一些函数是onSeriesClick和onPointClick。我希望这会有所帮助。

现在可以在Charts.js中找到

从文件中

图例配置

图例配置被传递到options.legend命名空间中。 图表图例的全局选项在中定义 Chart.defaults.global.legend

onClickfunction（event，legendItem）{}在标签项顶部注册“click”事件时调用的回调

onHover函数（事件，legendItem）{}一个 在标签项顶部注册“mousemove”事件时调用

---

更新@benallansmith answer后，文档链接如下：

示例代码的我的版本，在单击数据集1的图例时隐藏数据集2和3（数据集2和3的图例使用筛选函数隐藏）：

我的版本是v2.8.0 我找到一种工作方式，试试看

加

进入期权

var donutOptions     = {
                maintainAspectRatio : false,
                responsive : true,
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                tooltips: {
                    intersect: false,
                    callbacks: {
                        label: function (tooltipItem, data) {
                            ...
                        }
                    },
                },
                plugins: {
                    datalabels: {
                        ...
                        },
                    },
                },
                legend : {

                }

            };

用这个

donutChart.chart.getDatasetMeta(0).data[index].hidden = true;

donutChart.update();

---

只是在没有那个系列的情况下重新绘制图表吗？@Pointy我想知道是否有一种更简单、更独立、更自动的方法来完成它。这样，我必须以友好的方式将事件附加到图例项，排除或包括序列和重画。在很多图表中，这会很快变得混乱，我想，不过还是要谢谢你。据我所知，Chart.js在支持交互方面没有太多的成熟度。我不知道为什么它不受欢迎。这对我帮助很大，谢谢+如果我可以的话，还有更多，很好的解决方案！我有多个按特定顺序排列的数据集。使用jsfiddle（）中的代码，一旦隐藏了某个内容，然后单击再次显示它，该数据集将被推到最后。有没有办法让它记住它原来在队列中的位置，一旦它被隐藏，然后又被取消隐藏？最初的问题是关于ChartJS的使用，而不是dxCharts，所以这是没有帮助的。

legend : {

                }

var donutOptions     = {
                maintainAspectRatio : false,
                responsive : true,
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                tooltips: {
                    intersect: false,
                    callbacks: {
                        label: function (tooltipItem, data) {
                            ...
                        }
                    },
                },
                plugins: {
                    datalabels: {
                        ...
                        },
                    },
                },
                legend : {

                }

            };

donutChart.chart.getDatasetMeta(0).data[index].hidden = true;

donutChart.update();