如何在Chartjs上隐藏多个图例？

dkqlctbz 于 2022-11-23 发布在 Chart.js

关注(0)|答案(3)|浏览(248)

如何使用chart js隐藏图表上的两个标签？
以下面的代码为例，我想隐藏图例1和图例2，但只能隐藏一个元素

const ctx = document.getElementById('chart');
const data = [1, 2, 3, 4, 5, 6, 7, 8];
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      // This label is removed in the filter function
      label: 'Legend 1',
      data: [12, 19, 3, 5, 2, 3],
    }, {
      label: 'Legend 2',
      data: [11, 12, 33, 4, 2, 3],
    }, {
      label: 'Legend 3',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(0, 195, 255, 0.2)',
    }]
  },
  options: {
    legend: {
      labels: {
        filter: function(item, chart) {
          // Logic to remove a particular legend item goes here
                    return !item.text.includes('Legend 1');
        }
      }
    }
  }
});

谢谢你

编辑1

先说清楚，我已经找到了如何隐藏一个传说，但我想隐藏不止一个。
喜欢下面的图片

chart.js

来源：https://stackoverflow.com/questions/54347221/how-to-hide-more-than-one-legend-on-chartjs

3条答案

按热度按时间

68de4m5k1#

在this link上找到答案
基本上，我所做的就是插入关于期权的陈述：

legend: {
        labels: {
            filter: function(legendItem, chartData) {
                if (legendItem.datasetIndex === 0 || legendItem.datasetIndex === 1 ) {
                    return false;
                }
            return true;
            }
        }
},

我相信这解决了我的问题

赞(0）回复(0）举报 2022-11-23

tez616oj2#

请在标签级别隐藏它们，而不是在选项级别隐藏它们：

datasets: [{
      label: 'Legend 1',
        hidden: true,
      data: [12, 19, 3, 5, 2, 3],
    }, {
      label: 'Legend 2',
      hidden: true,
      data: [11, 12, 33, 4, 2, 3],

赞(0）回复(0）举报 2022-11-23

q43xntqr3#

对于chartjs V3，我们花了一些时间来实现它，它是插件内的选项：

options: {
        plugins: {
            legend: {
                labels: {
                    filter: function(legendItem, data) {
                        let label = data.datasets[legendItem.datasetIndex].label || '';
                        if (typeof(label) !== 'undefined') {
                            if (legendItem.datasetIndex >= 3){
                                return false;
                            }
                        }
                        return label;
                    }
                }
            }
        },
    },

赞(0）回复(0）举报 2022-11-23

我来回答

如何在Chartjs上隐藏多个图例？

3条答案

相关问题

热门标签

最新问答