如何在Chart.js中为每条线的末尾添加97th、95th这类文本标识

Hey there! I’ve run into this exact need before—adding those percentile labels at the end of each line in Chart.js isn’t built-in, but it’s super straightforward with a custom plugin or the animation complete hook. Let me break down two reliable ways to do it:

Approach 1: Use a Custom Chart.js Plugin #

Plugins are the cleanest way to extend Chart.js functionality, since they hook into the rendering lifecycle directly. Here’s a complete example:

const percentileLabelPlugin = {
  id: 'percentileLabels',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    ctx.save();
    
    // Define your percentile labels (match the order of your datasets)
    const labels = ['97th', '95th', '50th'];
    
    chart.data.datasets.forEach((dataset, index) => {
      if (dataset.data.length === 0) return;
      
      // Grab the last data point in the dataset
      const meta = chart.getDatasetMeta(index);
      const lastPoint = meta.data[meta.data.length - 1];
      
      // Calculate label position (adjust offsets to avoid overlap)
      const xPosition = lastPoint.x + 10; // Shift right from the point
      const yPosition = lastPoint.y + 5; // Fine-tune vertical alignment
      
      // Style label to match the line's color
      ctx.fillStyle = dataset.borderColor;
      ctx.font = '12px Arial';
      ctx.textAlign = 'left';
      
      // Draw the label on the chart
      ctx.fillText(labels[index], xPosition, yPosition);
    });
    
    ctx.restore();
  }
};

// Register the plugin globally (or per chart if needed)
Chart.register(percentileLabelPlugin);

// Your chart configuration
const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: '97th Percentile',
        data: [12, 19, 15, 25, 22],
        borderColor: '#FF6384',
        fill: false
      },
      {
        label: '95th Percentile',
        data: [10, 17, 13, 23, 20],
        borderColor: '#36A2EB',
        fill: false
      },
      {
        label: '50th Percentile',
        data: [7, 12, 9, 18, 15],
        borderColor: '#FFCE56',
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

Approach 2: Use the animation.onComplete Hook #

If you only need this for a single chart and don’t want a global plugin, you can add the label logic directly in the chart’s animation completion hook:

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: { /* Same dataset structure as above */ },
  options: {
    responsive: true,
    scales: { y: { beginAtZero: true } },
    animation: {
      onComplete: function() {
        const ctx = this.ctx;
        ctx.save();
        const labels = ['97th', '95th', '50th'];
        
        this.data.datasets.forEach((dataset, index) => {
          if (dataset.data.length === 0) return;
          const meta = this.getDatasetMeta(index);
          const lastPoint = meta.data[meta.data.length - 1];
          
          ctx.fillStyle = dataset.borderColor;
          ctx.font = '12px Arial';
          ctx.textAlign = 'left';
          ctx.fillText(labels[index], lastPoint.x + 10, lastPoint.y + 5);
        });
        
        ctx.restore();
      }
    }
  }
});

Quick Adjustment Tips: #

• Positioning: Tweak the +10 and +5 offsets in xPosition/yPosition to move labels away from lines or points.
• Styling: Modify ctx.font, ctx.fillStyle, or ctx.textAlign to match your chart’s design system.
• Dynamic Labels: If your percentiles change dynamically, pull them from the dataset’s label property (e.g., dataset.label.split(' ')[0]) instead of hardcoding.
• Empty Data Checks: The if (dataset.data.length === 0) line prevents errors if a dataset has no points.

This should get you those clean, targeted labels at the end of each line without any messy workarounds. Let me know if you need help tweaking it for your specific chart setup!

内容的提问来源于stack exchange，提问作者Sai Saagar Sharman