react-chartjs-2折线图标记状态变更数据点的实现方案咨询

react-chartjs-2基于Chart.js封装，完全可以借助Chart.js的核心能力实现数据点的状态标记，下面给你几个实用方案：

方案一：自定义绘制标签（无需额外插件） #

通过Chart.js的plugins配置，在afterDraw钩子中手动绘制文本标签，精准定位目标数据点：

import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

// 示例数据与状态标记映射
const chartData = {
  labels: ['08:00', '08:15', '08:30', '08:45', '09:00'],
  datasets: [{
    label: '滚筒转速',
    data: [60, 62, 58, 45, 30],
    borderColor: '#36A2EB',
    backgroundColor: '#9BD0F5',
  }]
};

// 状态标记集合，关联x轴标签与对应文本
const statusMarkers = [
  { xLabel: '08:15', text: 'Leave Site (LP)' },
  { xLabel: '08:45', text: 'Arrive Site (AS)' },
  { xLabel: '09:00', text: 'Begin Pour (BP)' }
];

const chartOptions = {
  plugins: {
    afterDraw: (chart) => {
      const ctx = chart.ctx;
      const xAxis = chart.scales.x;
      const yAxis = chart.scales.y;

      statusMarkers.forEach(marker => {
        // 获取目标数据点的像素坐标
        const dataIndex = chartData.labels.indexOf(marker.xLabel);
        const xPos = xAxis.getPixelForValue(marker.xLabel);
        const yPos = yAxis.getPixelForValue(chartData.datasets[0].data[dataIndex]);

        // 绘制标记文本
        ctx.save();
        ctx.font = '12px Arial';
        ctx.fillStyle = '#FF0000';
        ctx.textAlign = 'center';
        ctx.fillText(marker.text, xPos, yPos - 15); // 文本偏移到数据点上方
        // 可选：给目标点加高亮圆点
        ctx.beginPath();
        ctx.arc(xPos, yPos, 6, 0, Math.PI * 2);
        ctx.fillStyle = '#FF0000';
        ctx.fill();
        ctx.restore();
      });
    }
  }
};

export default function SpeedChart() {
  return <Line data={chartData} options={chartOptions} />;
}

这个方案完全自定义，位置、样式都能灵活控制，适合需要个性化标记的场景。

方案二：使用注释插件（规整化标记） #

如果需要更规范的标记样式（比如带背景框、箭头的标注），可以用chartjs-plugin-annotation插件集成：

先安装插件：

npm install chartjs-plugin-annotation

然后配置使用：

import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(...registerables, annotationPlugin);

const chartData = { /* 同方案一 */ };

const chartOptions = {
  plugins: {
    annotation: {
      annotations: {
        lpMarker: {
          type: 'text',
          xValue: '08:15',
          yValue: 62, // 对应数据点的y值
          content: 'Leave Site (LP)',
          font: { size: 12 },
          color: '#FF0000',
          yAdjust: -15, // 文本向上偏移
        },
        asMarker: {
          type: 'text',
          xValue: '08:45',
          yValue: 45,
          content: 'Arrive Site (AS)',
          font: { size: 12 },
          color: '#28A745',
          yAdjust: -15,
        }
      }
    }
  }
};

export default function SpeedChart() {
  return <Line data={chartData} options={chartOptions} />;
}

插件支持线、框、椭圆等多种注释类型，适合需要标准化标记的场景。

方案三：自定义Tooltip（hover时显示标记） #

如果不需要永久显示标记，仅在hover数据点时展示状态文本，可以自定义tooltip：

const chartOptions = {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          let label = context.dataset.label || '';
          label += label ? ': ' : '';
          // 匹配当前数据点的状态标记
          const marker = statusMarkers.find(m => m.xLabel === context.label);
          if (marker) {
            label += `${context.parsed.y} rpm | ${marker.text}`;
          } else {
            label += `${context.parsed.y} rpm`;
          }
          return label;
        }
      }
    }
  }
};

hover目标数据点时，tooltip会同时显示转速和状态标记，适合无需永久展示标记的场景。

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