如何在 ChartJS 3.3.2 中仅显示最小和最大数据标签？

Question

我想在 ChartJS 3.3.2 中仅显示最小和最大数据标签。 这项工作与 yticks 无关。我想在图表中显示最小和最大数据标签。 我怎样才能用chartjs-plugin-datalabel做到这一点？

我认为可以使用数据标签格式化程序来制作。

Answer 1

在 Chart.js 3.3.2 中，您可以使用

chartjs-plugin-datalabels

插件显示数据标签，然后使用格式化程序功能有选择地仅显示最小和最大数据标签。以下是实现这一目标的方法：

1. 首先，确保您的项目中已包含

   chartjs-plugin-datalabels

   插件。

2. 配置您的 Chart.js 图表以使用该插件并指定数据标签的格式化程序函数。在您的图表配置中，添加以下选项：

const chartConfig = {
  type: 'bar', // or any other chart type
  data: {
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
    datasets: [
      {
        label: 'Data',
        data: [10, 20, 5, 30, 15],
      },
    ],
  },
  options: {
    plugins: {
      datalabels: {
        formatter: function(value, context) {
          // Get the dataset
          const dataset = context.chart.data.datasets[context.datasetIndex];
          
          // Get the minimum and maximum values in the dataset
          const min = Math.min(...dataset.data);
          const max = Math.max(...dataset.data);
          
          // Show data label only for minimum and maximum values
          if (value === min || value === max) {
            return value;
          } else {
            return ''; // Empty string to hide the label
          }
        },
        anchor: 'center', // You can adjust the label anchor position
      },
    },
  },
};

// Create the chart
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, chartConfig);

在本例中，我们使用

formatter

插件提供的

datalabels

函数来自定义数据标签的显示。该函数检查当前数据点的值是否等于数据集中的最小值或最大值，并相应地显示标签。

确保调整图表类型、标签和数据集值以满足您的特定图表要求。

通过使用这种方法，图表上只会显示与数据集中的最小值和最大值对应的数据标签。