嗨，迈克尔·赫尔利，我认为你应该使用：

• • 插值**：https://www.chartjs.org/docs/latest/samples/line/interpolation.html

或

• • 多轴**：https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

我的想法是，我们有3个数据集与多色，结束dataset1是第一个dataset2。
这里我的例子：
第一个

最新版本的ChartJS允许您单独自定义线段，这可以用来更改特定线段的颜色和样式（虚线等）。

const config = {
  type: 'line',
  data: {
    labels: Utils.months({count: 7}),
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, NaN, 48, 56, 57, 40],
      borderColor: 'rgb(75, 192, 192)',
      segment: {
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [6, 6]),
      }
    }]
  },
  options: genericOptions
};

有关详细信息，请参阅https://www.chartjs.org/docs/master/samples/line/segments.html。

插件核心API提供了一系列钩子，可以用来执行自定义代码。您可以使用afterLayout钩子创建一个通过CanvasRenderingContext2D.createLinearGradient()的线性渐变。
在下列范例中，缐性渐层是从data.dataset.colors中定义的颜色建立的。
第一个

在V3中，您可以使用数据集中的segment选项来设置特定线部分的样式：
第一个

我一直想让大家知道一种React图表的方法。

import React from "react";
import { LineController } from 'chart.js';
import Chart from 'chart.js/auto';

class MultiLineController extends LineController {
  draw() {
    const ctx = this.chart.ctx;
    const meta = this.getMeta();
    const points = meta.data || [];
    const colors = this.getDataset().colors || [];
    const area = this.chart.chartArea;

    colors.forEach((color, idx) => {
      meta.dataset.options.borderColor = color;
      meta.dataset.draw(ctx, area, idx, 2);
    });
    meta.dataset.draw(ctx, area, colors.length, points.length - colors.length);
  }
}
MultiLineController.id = "multicolorLine";
MultiLineController.defaults = LineController.defaults;

Chart.register(MultiLineController);

export default function App() {
  React.useEffect(() => {
    const ctx = document.getElementById("line-chart").getContext("2d");
    window.lineChart = new Chart(ctx, {
      type: 'multicolorLine',
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          label: "My First dataset",
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 10, 5, 2, 20, 30, 45],
          colors: ['red', 'green', 'blue', 'yellow']
        }]
      },
      options: {}
    });

    return () => window.lineChart.destroy();
  }, []);

  return (
    <div style={{width: '100%', height: 300}}>
      <canvas id="line-chart" />
    </div>
  );
}

以下是此图表的屏幕截图。React Chart Component implemented by chart.js