Chart.js v3.5.1使用chartjs-plugin-datalabels实现柱形折线图数据标签显示

配置调整步骤 #

你只需要修改3处配置即可实现需求，以下是完整修改后的代码：

// 首先确保你已经正确导入插件
import ChartDataLabels from 'chartjs-plugin-datalabels';

this.chart = new Chart(this.myChart.nativeElement, {
  type: 'bar',
  // 1. 根级新增plugins配置注册插件，你之前的注释代码放错了位置
  plugins: [ChartDataLabels],
  data: {
    datasets: [
      {
        label: 'Station Min.',
        data: this.chartData.gen_min_data,
        backgroundColor: 'lightblue',
        borderColor: 'darkblue',
        borderWidth: 0.5,
        type: 'bar',
        order: 4,
        // 单独配置柱体标签显示
        datalabels: {
          display: true,
          color: 'darkblue'
        }
      },
      {
        label: 'Target Min.',
        data: this.chartData.target_min_data,
        backgroundColor: 'green',
        pointBorderWidth: 0,
        pointRadius: 0,
        borderColor: 'green',
        type: 'line',
        order: 3,
        // 不需要显示折线标签就设为false，需要就改成true
        datalabels: {
          display: false,
          color: 'green'
        }
      },
      {
        label: 'Max Available Min.',
        data: this.chartData.max_min_data,
        backgroundColor: 'red',
        pointBorderWidth: 0,
        pointRadius: 0,
        borderColor: 'red',
        type: 'line',
        order: 2,
        datalabels: {
          display: false,
          color: 'red'
        }
      },
      {
        label: 'Average Min.',
        data: this.chartData.avg_min_data,
        backgroundColor: 'orange',
        pointBorderWidth: 0,
        pointRadius: 0,
        borderColor: 'orange',
        order: 1,
        datalabels: {
          display: false,
          color: 'orange'
        }
      },
    ],
    labels: this.chartData.station_labels,
  },            
  options: {
    responsive: true,
    plugins: {  
      legend: {
        position: 'bottom',
      },
      title: {
        display: true,
        text: this.user.curDepartment + ' ' + this.chartData.dept_desc + '(' + this.fromDate + ')',
        font: {
          size: 20
        }
      },
      // 2. 新增datalabels全局配置
      datalabels: {
        anchor: 'end', // 标签对齐的基准点
        align: 'top', // 标签相对于基准点的位置
        formatter: (value) => {
          // 可以自定义数值格式，比如保留1位小数
          return value.toFixed(1);
        },
        font: {
          size: 12
        }
      }
    },
    scales: {
      y:  {
        display: true,
        ticks: {},
        title: {
          display: true,
          text: 'Minutes/Day',
          font: {
            size: 16
          }
        }
      } 
    }
  },
});

可选调整说明 #

• 如果要同时显示折线的标签，只需要把对应折线dataset里的datalabels.display改成true即可
• 如果出现标签重叠的情况，可以单独给折线数据集调整anchor和align参数，比如折线标签设为anchor: 'start', align: 'bottom'，和柱体标签错开位置
• 如果不需要全局配置，也可以把所有样式配置直接写在对应dataset的datalabels节点下，实现不同数据集标签样式差异化

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