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

ecr0jaav  于 2023-01-26  发布在  Chart.js
关注(0)|答案(5)|浏览(277)

是否可以在chartjs中只隐藏某些数据集图例?我知道可以使用隐藏所有图例

options: {
    legend: {
        display: false
4zcjmb1e

4zcjmb1e1#

简短回答:* * 是的,这是可能的。**不幸的是,它并不像开发人员所能做到的那么简单。
如果您知道图例中显示的项的text值是什么,那么您可以将其过滤掉。在阅读Chart.js文档后,我发现Legend Label Configuration一节详细介绍了一个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设计的。未来版本可能会改进对数据集图例标签的控制。
omjgkv6w

omjgkv6w2#

First在chart.js docs下没有这个问题的官方例子。

如何按值过滤(隐藏大于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的想法(添加旁边的标签文本的值)。

9rnv2umw

9rnv2umw3#

针对Chart.js 3.x的更新

这个解决方案仍然有效,但图例选项已经被放置在“插件”中。因此,如果您不希望数据集的标 checkout 现在图例中,请给予它一个特定的名称,例如label: "none",然后使用filter函数:

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

r1zk6ea14#

在我的例子中,将标签更改为“隐藏”会导致它显示在工具提示中,而不是我想要的文本。
因此,这里有一种方法,你可以通过它的索引号来定位每个数据集的图例,而不必改变标签!

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

对我来说效果很好!

brvekthn

brvekthn5#

    • 您可以使用类似下面的方法过滤图表中的图例:**
plugins: {
  legend: {
    labels: {
      filter: function( item, chart){                   
        if (item.text == 'Open' || item.text == 'High') {
          return false;
        }else{
          return item;
        }
      }
    }
  },
}

相关问题