ChartJS 如果图例文字为零,如何隐藏图例文字?

c7rzv4ha  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(199)

我试图隐藏一个项目的图例标题,如果它的值为零。有类似的问题存在这里,但没有导致解决我的问题。
下面是我的源代码:

<script>
      var ctx = document.getElementById('beratungsfelderChart');
      var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
            datasets: [{
                label: '# of Votes',
                data: [0, 3, 3, 5, 2],
                backgroundColor: [
                    '#172b4dD9',
                    '#2dce89D9',
                    '#231F20D9',
                    '#192d35D9',
                    '#3B6058D9'
                ]
            }]
        },
        options: {
          legend: {
            labels: {
              //filter: function(item, chart, context) {
              //  return !item.text.includes('Test');
              //}
              filter: function(item, context) {
                return !context.dataset.data[context.dataIndex] == 0;
              } 
            }
          },
          axis: {
            scales: {
                yAxes: [{
                    display: false
                }],
                xAes: [{
                  ticks: {
                    display: false
                  }
                }]
            }
          },
          plugins: {
            datalabels: {
              display: function(context) {
                return context.dataset.data[context.dataIndex] > 1;
              }
            }
          }
        }
    });

    </script>

正如你所看到的,我尝试了一些潜在的解决方案,但直到现在,没有工作不幸。
1.选项-〉图例-〉标签
2.选项-〉插件-〉数据标签
我希望有人能帮助我。
贝斯特纳德

aelbi1ox

aelbi1ox1#

应按如下方式使用legend.labels.filter

legend: {
  labels: {
    filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0
  }
}

第一个

qfe3c7zg

qfe3c7zg2#

您也可以使用generateLabels来代替filter。这是一种较新的方法,您可以更改每个图例的值和样式。例如,我删除了零值并向每个标签添加了数据:
第一个

相关问题