更改雷达图中特定网格线的borderDash

如何解决更改雷达图中特定网格线的borderDash

我正在使用ChartJS生成雷达图。

我希望最后一个gridLine（最外面的）保持不变，而其他所有虚线都为虚线。

图片示例：

我已经看到this pull request中可能有变化的borderDash，它也显示了它的实际作用，但是还没有找到编写它的脚本的方法。 （编辑：似乎链接的拉取请求已将其提交到主服务器，并计划与V3.0一起发布-表示该请求尚不可用（？）

脚本的快速示例代码：

scale: {
gridLines: {
    borderDash: function(context) {
        return context.index % 2 === 0 ? [2,3] : [10,10];
    },},

解决方法

您已经可以使用 Chart.js版本3 ，它的版本为Chart.js 3.0.0-beta。

只需将以下script标签添加到您的HTML页面。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>

请查看以下代码段，并查看其工作原理。

new Chart("radar-chart",{
  type: 'radar',data: {
    labels: ["A","B","C","D","E"],datasets: [{
      data: [25.48,54.16,7.61,8.06,4.45],backgroundColor: "rgba(255,99,132,0.2)",borderColor: "rgba(255,1)"
    }]
  },options: {
    legend: {
      display: false
    },scale: {
      ticks: {
        min: 0,max: 60,stepSize: 10
      },gridLines: {
        lineWidth: 2,color: "lightgreen",borderDash: context => context.index == 6 ? [] : [6,4]
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<canvas id="radar-chart" height="120"></canvas>