如何在图表Marker中展示除坐标点(x,y)外的自定义数据？

Got it, let's tackle this! Since you already know how to tweak marker text and x/y coordinates, the main trick here is to store the raw reps and weight data right alongside your calculated y-value, then pull that data when rendering the marker label instead of relying on the default x/y output.

Here's a step-by-step breakdown using common charting libraries (the core logic applies to most tools):

1. Attach Raw Data to Your Chart Dataset #

First, make sure each data point includes the reps and weight values used to calculate the y-value (233.3 in your example). Don't just store the computed y—keep the source data tied to the point:

// Example for Chart.js
const workoutData = {
  labels: ['Session 1'], // X-axis labels
  datasets: [{
    label: 'Calculated Strength',
    data: [
      {
        x: 'Session 1',
        y: 233.3,
        reps: 5, // Raw data we want to display
        weight: 200 // Raw data we want to display
      }
    ],
    // Add your usual styling (color, point radius, etc.)
  }]
};

2. Override the Marker/Tooltip Label Renderer #

Next, tell your chart library to use the raw reps/weight instead of the default x/y values for the marker label. The exact method varies by library, but here are two common examples:

For Chart.js (Tooltip or Inline Marker Text) #

If you want the label in the tooltip that pops up on hover:

const chartOptions = {
  plugins: {
    tooltip: {
      callbacks: {
        label: (context) => {
          // Pull the raw data from the current point
          const { reps, weight } = context.parsed;
          return `${reps} reps @ ${weight} lb`;
        }
      }
    }
  },
  // If you want text directly on the marker (not just tooltip):
  elements: {
    point: {
      label: {
        display: true,
        formatter: (context) => {
          const { reps, weight } = context.dataset.data[context.dataIndex];
          return `${reps}@${weight}`; // Shortened for space, adjust as needed
        }
      }
    }
  }
};

For Highcharts #

Highcharts uses a similar approach with a tooltip formatter:

const chartOptions = {
  tooltip: {
    formatter: function() {
      return `${this.point.reps} reps @ ${this.point.weight} lb`;
    }
  },
  series: [{
    data: [
      {
        y: 233.3,
        reps: 5,
        weight: 200
      }
    ]
  }]
};

3. Key Takeaway #

No matter which library you're using, the core idea is the same: bind your raw calculation data to each data point so you can reference it when customizing the marker label. This replaces the default x/y output with the exact values you used to compute the y-value.

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