在chartjs中是否可以隐藏某些数据集图例？

Question

是否有可能只隐藏chartjs中的某些数据集图例？我知道有可能隐藏所有

options: {
    legend: {
        display: false

Answer 1

简短的回答:是的,这是可能的.不幸的是,它并不像开发人员那样简单.

如果您知道text图例中显示的项目的值是什么,那么您可以将其过滤掉.通过阅读Chart.js文档后,我找到了图例标签配置部分,其中详细说明了filter可用于"过滤掉图例项目"的功能,尽管此功能必须在父图表选项对象上设置,而不是作为选项设置.数据集本身:

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            labels: {
                filter: function(item, chart) {
                    // Logic to remove a particular legend item goes here
                    return !item.text.includes('label to remove');
                }
            }
        }
    }
});

现在每次数据更改时都会出现,并且通过chart.update()此过滤器函数更新图表会被调用.

为方便起见,我已将其设置为jsfiddle供您玩.

注意:此解决方案是围绕ChartJS 2.7.1版的API设计的.未来版本可以改进对数据集图例标签的控制.

Answer 2

Chart.js 3.x 更新

该解决方案仍然有效，但图例选项已放置在“插件”内。因此，如果您不希望某个数据集的标签出现在图例上，请为其指定一个特定名称，例如label: "none"，然后使用过滤函数：

    options: {
        plugins: {
            legend: {
                labels: {
                    filter: item => item.text !== 'none'
                }
            }
        }
    }

Answer 3

首先，chart.js 文档下没有此问题的官方示例。

如何按值过滤（隐藏大于 1000 的值的所有图例）

从图例中过滤图例项目。接收 2 个参数、一个图例项和图表数据。https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration

基本示例 - “像魔术一样工作”：

数据：

  var data = {
    labels: ["Africa", "Asia", "Europe"],
    datasets: [{
      label: "Population (millions)",
      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
      data: [1000,1500,2000]
    }]
  };

“技巧” - 获取值数组：

data.datasets[0]

像这样我得到了data数组。

接下来 -filter 循环抛出数据 - 每次我通过 获取当前值index。基本数组思想：如何在 JavaScript 中获取数组特定索引处的值？

var index = legendItem.index; /* 0..1...2 */
var currentDataValue =  data.datasets[0].data[index]; /* 1000...1500...2000 */

如果“概念”

显示所有图例：

if (true){
  return true;
}

这隐藏了所有的传说

if (false){
  return true;
}

因此，添加if您想要的任何语句（在我们的例子中为数据值）：

if (currentDataValue > 1000){
  return true;
}

完整示例：

如果值大于 1,000，则隐藏图例：

data.datasets[0]

var index = legendItem.index; /* 0..1...2 */
var currentDataValue =  data.datasets[0].data[index]; /* 1000...1500...2000 */

顺便说一下，在上面的示例中，我也使用了generateLabels想法（在标签文本旁边添加值）。