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

【问题标题】：Changing borderDash for specific gridLines in radar chart更改雷达图中特定网格线的borderDash
【发布时间】：2020-09-20 22:28:55
【问题描述】：

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

我希望最后一个 gridLine（最外层）保持实线，而所有其他的都是虚线。

图片示例：

我已经看到this pull request 中可能有不同的borderDash，它也显示了它在运行中的图像，但还没有找到一种方法来编写它。（编辑：似乎链接的拉取请求已进入 master，计划与 V3.0 一起发布 - 这意味着它尚不可用（？））

脚本的快速示例代码：

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

【问题讨论】：

标签： chart.js chart.js3

【解决方案1】：

您已经可以使用 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>

请看下面的代码 sn-p 看看它是如何工作的。

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,99,132,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>

【讨论】：