Chart JS在条形图顶部显示数据值

// 引入Chart JS库
import Chart from 'chart.js';

// 创建条形图的数据
const data = {
  labels: ['数据1', '数据2', '数据3'],
  datasets: [{
    label: '数据集',
    data: [10, 20, 30],
    backgroundColor: ['red', 'blue', 'green']
  }]
};

// 创建条形图的配置选项
const options = {
  plugins: {
    // 自定义插件
    customLabels: {
      // 在条形图的每个条形上绘制数据值
      drawLabels(chart) {
        const { ctx, data, scales } = chart;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        data.datasets.forEach((dataset, datasetIndex) => {
          const meta = chart.getDatasetMeta(datasetIndex);
          meta.data.forEach((bar, index) => {
            const dataValue = dataset.data[index];
            const xPos = bar._model.x;
            const yPos = bar._model.y - 5;
            ctx.fillText(dataValue, xPos, yPos);
          });
        });
      }
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

// 创建条形图实例
const barChart = new Chart(document.getElementById('barChart'), {
  type: 'bar',
  data: data,
  options: options
});