Question

是否可以仅隐藏chartjs中的某些数据集图例？我知道可以用

隐藏所有内容

options: {
    legend: {
        display: false

Answer 1

简短回答：是的，这是可能的。不幸的是，它并不像开发人员那样简单。

如果您知道图例中显示的项目的text值是什么，那么您可以将其过滤掉。在阅读Chart.js文档后，我发现了Legend Label Configuration部分详细说明了filter函数，该函数可用于过滤掉图例项＆＃34;尽管必须设置此函数在父图表选项对象上，而不是作为数据集本身的选项：

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

就我而言，将标签更改为“隐藏”会导致该提示显示在工具提示中，而不是我想要的文本。

因此，您可以通过索引号更改标签来定位每个数据集的图例！

const chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    legend: {
      labels: {
        filter: function(item, chart) {
          return item.datasetIndex !== INDEX_OF_DATASET && item.datasetIndex !== INDEX_OF_ANOTHER_DATASET;
        }
      }
    }
  }
});

就我而言，我正在使用wpDataTables在WordPress中创建图表，因此代码如下所示：

wpDataChartsCallbacks[INDEX_OF_CHART_HERE] = function (obj) {
  obj.options.options.legend.labels.filter = function(item, chart) {
    return item.datasetIndex !== INDEX_OF_DATASET && item.datasetIndex !== INDEX_OF_ANOTHER_DATASET;
  }
}

对我来说很好！

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获得当前值时。基本数组的概念：How to get value at a specific index of array In 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，则隐藏图例：

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

var options = {
  responsive: true,
  title: {
    text: 'Hide africa legened (Greater than 1000)',
    position: 'top',
    display: true
  },
  legend: {
    display: true,
    labels: {
      /* filter */
      filter: function(legendItem, data) {
        /* filter already loops throw legendItem & data (console.log) to see this idea */
        var index = legendItem.index;
        var currentDataValue =  data.datasets[0].data[index];
        console.log("current value is: " + currentDataValue)
        if (currentDataValue > 1000)
        {
          return true; //only show when the label is cash
        }
      },
      /* generateLabels */
      generateLabels(chart) {
        const data = chart.data;
        if (data.labels.length && data.datasets.length) {
          /* inner loop throw lables */
          return data.labels.map((label, i) => {
            var backgroundColor = data.datasets[0].backgroundColor[i];
            return {
              text: label + " | " + data.datasets[0].data[i],
              fillStyle: backgroundColor,
              // Extra data used for toggling the correct item
              index: i
            };
          });
        }
        return [];
      }

    },

  },
  scales: {
    xAxes: [{
      display: true
    }],
    yAxes: [{
      display: true
    }]
  }
};


new Chart(document.getElementById("chart"), {
  type: 'pie',
  data: data,
  options: options
});

<canvas id="chart" width="800" height="450"></canvas>
   
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

通过上面的示例，我还使用了generateLabels的想法（在标签文本旁边添加值）。

Answer 4

**您可以使用类似的方法过滤掉图表中的图例：**

plugins: {
  legend: {
    labels: {
      filter: function( item, chart){                   
        if (item.text == 'Open' || item.text == 'High') {
          return false;
        }else{
          return item;
        }
      }
    }
  },
}

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

4 个答案:

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

数据：

“技巧”-获取值数组：

如果“认为”

完整示例：