方案一

pointBorderColor和pointBackgroundColor在您只想为值的标记着色时工作得很好。为此，需要从值数组中预定义一个颜色数组。
您可以逐段为折线图的borderColor或backgroundColor着色。为此，您可以选择使用segment.borderColor或segment.backgroundColor（当设置了fill: true时）。这些设置调用一个函数，您可以将“段”的当前开始值和结束值传递给该函数。我已经写了一个例子，包括这些以及，虽然我必须定义0值在这里，以确保该段只包括正数或负数...下面是一个例子：
Chart.js Github Issue #1493

const ctx = document.getElementById("myChart").getContext("2d")
const data = [10, 20, 0, -10, -20, 0, 5]
const colors = data.map((value) => value < 0 ? 'red' : 'green')

const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    datasets: [{
      label: "Sample Dataset",
      data: data,
      fill: true, // set true for "backgroundColor" using
      segment: {
        borderColor: (part) => {
          const prevValue = part.p0.parsed.y // start value
          const nextValue = part.p1.parsed.y // end value
          return prevValue < 0 || nextValue < 0 ? "red" : "green" // return with a color by rule
        },
        backgroundColor: (part) => {
          const prevValue = part.p0.parsed.y // start value
          const nextValue = part.p1.parsed.y // end value
          return prevValue < 0 || nextValue < 0 ? "red" : "green" // return with a color by rule
        },
      },
      pointBorderColor: colors, // with array of colors
      pointBackgroundColor: colors, // with array of colors
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: {
          beginAtZero: true
        }
      }
    }
  },
})

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

<canvas id="myChart"></canvas>

方案二

要在Chart.js 3.x或更高版本中实现渐变填充，您可以使用名为chartjs-plugin-gradient的包。我在下面提供了一个简单的示例代码：

const ctx = document.getElementById("myChart").getContext("2d")
const gradient = window['chartjs-plugin-gradient'] // call CDN "chartjs-plugin-gradient"

const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
    datasets: [{
      label: "Sample Dataset",
      data: [0, 1, 4, 16, 64],
      fill: true, // set true for "backgroundColor" using
      gradient: {
        // Can set gradient background (need "fill: true")
        backgroundColor: {
          axis: 'y', // 'x' or 'y'
          colors: {
            // from value: color hex
            0: 'red',
            4: 'yellow',
            20: 'green'
          }
        },
        // Can set gradient line
        borderColor: {
          axis: 'y', // 'x' or 'y'
          colors: {
            // from value: color hex
            0: 'red',
            4: 'yellow',
            20: 'green'
          }
        }
      }
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: {
          beginAtZero: true
        }
      }
    }
  },
  plugins: [gradient] // using "chartjs-plugin-gradient"
})

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient#.js"></script>

<canvas id="myChart"></canvas>