我如何隐藏其他标签，并在顶部仅显示一个？

Question

我正在使用react-chartjs-2，我不知道如何在顶部图形中仅显示一个标签。

Chart

这里是选项配置：

选项：{spanGaps：错误，图例：{显示：假}，maintenanceAspectRatio：否，布局：{填充：{最高：32左：32，右：32}}，元素：{点：{半径：4borderWidth：2hoverRadius：4hoverBorderWidth：2}，行：{张力：0}}，秤：{x轴：[{网格线： {显示：false，drawBorder：否，tickMarkLength：18}，滴答声：{fontColor：'#ffffff'}}]，轴：[{显示：false，滴答声：{autoSkip：否，最小值：0，max：Math.max.apply（null，data）+ 80，步长：0.5}，id：“ id1”}]}，插件：{填料：{传播：错误}，xLabelsOnTop：{活动：真实}}}

Answer 1

首先定义一个您不想包含在图例中的数据集标签数组。

const hiddenLegendLabels = ['DEBUG', 'INFO'];

您需要如下更改图表legend内的options定义：

options: {
  legend: {
    labels: {
      filter: (legendItem, chartData) => !hiddenLegendLabels.includes(legendItem.text)
    }
  }
  ...

有关更多详细信息，请参阅Chart.js文档中的Legend Label Configuration。

请查看下面的可运行代码段。

const hiddenLegendLabels = ['DEBUG', 'INFO'];

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
        label: 'DEBUG',
        data: [3, 1, 0, 1],
        borderColor: 'rgb(180, 180, 180)',
        fill: false
      },
      {
        label: 'INFO',
        data: [2, 0, 1, 3],
        borderColor: 'rgb(44, 246, 37)',
        fill: false
      },
      {
        label: 'WARNINGS',
        data: [1, 2, 3, 2],
        borderColor: 'rgb(255, 159, 64)',
        fill: false
      },
      {
        label: 'ERRORS',
        data: [1, 2, 1, 3],
        borderColor: 'rgb(255, 99, 132)',
        fill: false
      }
    ]
  },
  options: {
    legend: {
      labels: {
        filter: (legendItem, chartData) => !hiddenLegendLabels.includes(legendItem.text)
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>