Chart.JS 显示图例中的 5 个最大值

Question

我想知道如何使用 Chart.JS 来限制图例中显示的项目数量。我想将最大数量设置为 5，它会显示图例中的 5 个最大值。我假设这将通过 options.plugins.labels 中的过滤器函数来完成，但我不确定如何相互检查数据集，然后只显示 5 个最大的数据集。

非常感谢您的帮助

Answer 1

您将对象的整个数据字段作为第二个参数，因此您可以计算每个数据集代表的数量，然后检查它是否是该数据集：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [120, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points1',
        data: [17, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points2',
        data: [27, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points3',
        data: [37, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points4',
        data: [47, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points5',
        data: [57, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points6',
        data: [67, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points7',
        data: [77, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points8',
        data: [87, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Points9',
        data: [97, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          filter: (ds, data) => {
            const sortable = [];

            data.datasets.forEach(d => {
              sortable.push([d.label, d.data.reduce((a, b) => (a + b), 0)])
            });

            sortable.sort((a, b) => (b[1] - a[1]));
            const sorted = sortable.slice(0, 5).map(e => (e[0]));

            return sorted.includes(ds.text)
          }
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Chart.JS 显示图例中的 5 个最大值

Chart.JS Display 5 largest values in the legend

javascript

chart.js