如何在Chart.js折线图每个数据点上方永久显示带数值的小容器

你可以通过chartjs-plugin-datalabels插件快速实现需求，不需要手动编写复杂的绘制逻辑，具体操作步骤如下： #

1. 安装依赖 #

npm 安装方式：

npm install chartjs-plugin-datalabels@2

注：插件版本需要和你使用的Chart.js版本匹配，Chart.js v3/v4对应datalabels v2版本。

2. 编写完整配置代码 #

你的现有数据如下：

const chartLabels = ['2018', '2019', '2020', 'TTM'];
const priceToSaleRatioData = [3.37, 5.73, 1.88, 4.6];

图表实例化代码参考：

// 引入依赖后先注册插件
import { Chart } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);

const ctx = document.getElementById('yourChartDomId').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: chartLabels,
    datasets: [{
      label: '市销率',
      data: priceToSaleRatioData,
      borderColor: '#2563eb',
      fill: false,
      tension: 0.3,
      pointRadius: 5
    }]
  },
  options: {
    plugins: {
      // 配置数值标签样式
      datalabels: {
        anchor: 'end',
        align: 'top',
        // 固定小盒子样式
        backgroundColor: '#ffffff',
        borderColor: '#2563eb',
        borderWidth: 1,
        borderRadius: 4,
        padding: {
          left: 4,
          right: 4,
          top: 2,
          bottom: 2
        },
        font: {
          size: 12,
          weight: 500
        },
        // 数值格式化，保留两位小数
        formatter: (val) => val.toFixed(2)
      }
    },
    // 保留你原有的其他配置，比如坐标轴配置
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '市销率'
        }
      }
    }
  },
  plugins: [ChartDataLabels]
});

如果你不想引入第三方插件，也可以通过Chart.js原生的afterDatasetDraw钩子自定义绘制标签，但需要自己处理坐标计算、响应式适配等逻辑，成本更高，更推荐使用官方维护的datalabels插件实现。

内容的提问来源于stack exchange，提问作者Adeel