ng2charts使用带有数组值的borderColor

Question

我正在尝试绘制折线图，​​每个数据条目使用单独的颜色。 使用borderColor作为颜色数组应该已经达到了预期的行为，但似乎不起作用。

还有其他人遇到这个问题吗？有没有简单的解决方法？

使用的代码：

 public lineChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81], label: 'Series A' },
  ];
  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April'];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
  };
  public lineChartColors: Color[] = [
    {
      borderColor: ['red', 'red', 'blue', 'blue'],
      backgroundColor: 'rgba(0, 0, 0, 0)',
    },
  ];
  public lineChartLegend = true;
  public lineChartType = 'line';

输出：Broken chart

Answer 1

如果我正确理解了您的问题，则希望在数据点之间使用不同的线条颜色。可以通过extending现有折线图完成此操作，如StackBlitz所示。请注意，此方法不使用ng2-charts。

一个更简单且可能更适合的解决方案是使用Plugin Core API afterLayout挂钩。您可以在其中通过CanvasRenderingContext2D.createLinearGradient()创建线性渐变。

CanvasRenderingContext2D.createLinearGradient()

请看下面的

lineChartPlugins = [{
  afterLayout: chart => {
    var ctx = chart.chart.ctx;
    var xAxis = chart.scales['x-axis-0'];
    var gradientStroke = ctx.createLinearGradient(xAxis.left, 0, xAxis.right, 0);
    var dataset = chart.data.datasets[0];
    dataset.colors.forEach((c, i) => {
      var stop = 1 / (dataset.colors.length - 1) * i;
      gradientStroke.addColorStop(stop, dataset.colors[i]);
    });
    dataset.backgroundColor = gradientStroke;
    dataset.borderColor = gradientStroke;
    dataset.pointBorderColor = gradientStroke;
    dataset.pointBackgroundColor = gradientStroke;
    dataset.pointHoverBorderColor = gradientStroke;
    dataset.pointHoverBackgroundColor = gradientStroke;
  }
}];

。

StackBlitz显示了不使用StackBlitz的示例。