使用可脚本化的borderColor: function(context, opts)，您将chart、图表示例、chartArea和canvas 2d上下文提取为：

const chart = context.chart;
const {ctx, chartArea} = chart;

您还可以找到以下内容：

• 此数据集使用的y轴的ID：

const yScaleId = opts._proxy.scales.y.id;

这是严格的方法，适用于具有多个y轴的图表;在实践中，您可能知道ID，在这种情况下，在那里;这只是默认轴，ID为y

• 实际y缩放对象

chart.scales[yScaleId]

及其min和max值，scaleMin和scaleMax

• 这个数据集的数据数组：

context.dataset.data

，并从中得到数据的最小值和最大值dataMin和dataMax。

• 对于轴和数据的极值，这是一个简单的线性关系，该关系给予：

const fracStart = (dataMin - scaleMin)/(scaleMax - scaleMin),
       fracEnd = (dataMax - scaleMin)/(scaleMax - scaleMin);

这些数字应该在线性垂直梯度的定义中取代0和1，因此第一种颜色对应于最小值，最后一种颜色对应于最大值。

完整代码来自您的codepen：

const ctx = document.getElementById('myChart');

let width, height, gradient;
function getGradient(ctx, chartArea, fracStart = 0, fracEnd = 1) {
  const chartWidth = chartArea.right - chartArea.left;
  const chartHeight = chartArea.bottom - chartArea.top;
  if (!gradient || width !== chartWidth || height !== chartHeight) {
    // Create the gradient because this is either the first render
    // or the size of the chart has changed
    width = chartWidth;
    height = chartHeight;
    gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
    const fracMid = (fracStart + fracEnd) / 2;
    gradient.addColorStop(fracStart, 'green');
    gradient.addColorStop(fracMid, 'yellow');
    gradient.addColorStop(fracEnd, 'red');
  }

  return gradient;
}

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [31, 27, 30, 51, 28, 32],
      stepped: true,
      borderWidth: 4,
      borderColor: function(context, opts) {
        const chart = context.chart;
        const {ctx, chartArea} = chart;
        
         // the id of the y scale of this dataset:
        const yScaleId = opts._proxy.scales.y.id; 
        const scaleMin = chart.scales[yScaleId].min,
              scaleMax = chart.scales[yScaleId].max;
        const dataMin = Math.min(...context.dataset?.data ?? [scaleMin]),
              dataMax = Math.max(...context.dataset?.data ?? [scaleMax]);
        const fracStart = (dataMin - scaleMin)/(scaleMax - scaleMin),
              fracEnd = (dataMax - scaleMin)/(scaleMax - scaleMin);

        if (!chartArea) {
          // This case happens on initial chart load
          return;
        }
        return getGradient(ctx, chartArea, fracStart, fracEnd);
      },
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

codepen fork。