ChartJS-如何选择可见的数据标签

Question

但这并不好。我希望标签每秒钟都可见。我想看看有多少标签。然后，如果超过X，只选择一些，但可能有一些更容易。

以下是标签中的代码：

options: {
        plugins: {
            datalabels: {
                align: 'top',
                color: '#000000',
                font: {
                    weight: 'bold',
                    size: '16'
                }
            }
        },
        title: {
          display: true,
          text: 'Level'
        }
      }

有什么想法吗？

Answer 1

您可以定义一个格式化程序，返回值，或者定义一个空的字符串，以防跳过数据标签。

例如，以下格式化程序确保图表上每秒钟只出现一次数据标签。

options: {
  plugins: {
    datalabels: {
      ...
      formatter: (value, context) => context.dataIndex % 2 == 0 ? value : ''
    }
    ...

这可以通过检查值的总数来扩展。只要值的总数小于100，以下格式化程序就会返回每个值。否则，它仅每秒返回值。

options: {
  plugins: {
    datalabels: {
      ...
      formatter: (value, context) =>  context.chart.data.datasets[0].data.length < 100 || context.dataIndex % 2 == 0 ? value : ''
    }
    ...