Question

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

我必须制作一个显示多个数据系列的折线图，用户可以通过单击相应的图例符号来隐藏或显示这些数据（类似于此http://js.syncfusion.com/demos/web/#!/azure/chart/linechart）。

有没有办法用chartjs做什么？

Answer 1

你可以试试这个为隐藏数据集创建商店

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();
    }

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

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>"

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

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

例如fiddle

Answer 2

现在可以在Charts.js

中找到

来自文档

图例配置

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

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

onHover function（event，legendItem）{}回调即是   当'mousemove'事件在标签项
之上注册时调用

Answer 3

我发现没有办法做到这一点。在图例模板上放置一些onclick行为很容易，你可以轻松地将系列描边和颜色alpha通道更改为0，这样区域和笔划就会消失，但是我发现没有办法在分。

我决定在这个特定的图表中使用谷歌图表，并且每当我不需要这种行为时都会使用chart.js，希望chart.js的优秀创建者将来会添加它。

Answer 4

@benallansmith答案的更新，文档链接现在为：

https://www.chartjs.org/docs/latest/configuration/legend.html

我的示例代码版本，在单击数据集1的图例时隐藏了数据集2和3（数据集2和3的图例通过过滤功能隐藏了）

public static readonly myChart: Chart.ChartConfiguration = {
    type: 'line',
    data: {
        datasets: [
            {
                label: 'A',
                borderColor: 'red',
                fill: false,
                lineTension: 0
            },
            {
                label: 'B',
                borderColor: 'blue',
                fill: false,
                lineTension: 0,
                pointRadius: 0
            },
            {
                borderColor: 'blue',
                borderDash: [5, 10],
                borderWidth: 1,
                fill: false,
                lineTension: 0,
                pointRadius: 0
            },
            {
                borderColor: 'blue',
                borderDash: [5, 10],
                borderWidth: 1,
                fill: false,
                lineTension: 0,
                pointRadius: 0
            }
       ]
   },
   options: {
       legend: {
           labels: {
               filter: function(legendItem, chartData) {
                    if (legendItem.datasetIndex > 1) {
                        return false;
                    }
                    return true;
                }
            },
            onClick: function(e, legendItem) {
                const index = legendItem.datasetIndex;
                if (index === 1) {
                    const ci = this.chart;
                    [
                        ci.getDatasetMeta(1),
                        ci.getDatasetMeta(2),
                        ci.getDatasetMeta(3)
                    ].forEach(function(meta) {
                        meta.hidden = meta.hidden === null ? !ci.data.datasets[1].hidden : null;
                    });
                    ci.update();
                } else {
                    // Do the original logic
                    Chart.defaults.global.legend.onClick.call(this, e, legendItem);
                }
            }
        },
        responsive: false,
        animation: {
            duration: 0
        },
    }
...
};

Answer 5

我的版本是v2.8.0 我找到一种工作方法，尝试一下。

添加

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();

Answer 6

onLegendClick: function (e) {
var series = e.target;
                series.isVisible() ? series.hide() : series.show();
            },

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

Chart.js：点击图例隐藏系列

6 个答案: