angular - Chart.js 不同 scaleLine 雷达图颜色( Angular )

Question

目前我在我的 Angular 项目中使用雷达图(chart.js)。我想更改不同部分的 scaleLineColor，但不知道如何实现此结果:



根据这个新的修复程序，它应该是可能的:
https://github.com/chartjs/Chart.js/pull/2732

我也试过这个:Chart.js (Radar Chart) different scaleLineColor for each scaleLine

但根本没有效果;((我认为是因为它是用旧版本编写的)

Answer 1

设置 gridlines color属性到要使用的颜色数组(强调我的):

The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.

示例:

var chart1 = new Chart(document.getElementById('chart'), {
  type: 'radar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    datasets: [{
      label: 'series1',
      data: [1, 2, 3, 6, 3, 2, 4]
    }]
  },
  options: {
    scale: {
      gridLines: {
        color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo']
      }
    }
  }
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>