如何在Vue-ChartJS中设置坐标轴虚线网格线？

你之前用的tickBorderDash是用来设置刻度标记线条的样式，并非网格线的配置项，这就是为什么只有网格外围的刻度线变成虚线、内部网格线没变化的原因。

要实现网格线的虚线效果，需要在对应轴的grid配置中使用borderDash属性，以下是两种场景的正确配置：

1. XY轴网格线均为虚线 #

options = {
  scales: {
    y: {
      grid: {
        color: this.gridColor,
        borderDash: [1, 5], // 定义Y轴网格线的虚线规则：1px实线 + 5px空白
        display: true
      },
      ticks: { color: '#2CF1A7', beginAtZero: true, maxRotation: 10 }
    },
    x: {
      grid: {
        color: '#000',
        borderDash: [1, 2], // 定义X轴网格线的虚线规则
        display: true
      },
      ticks: { color: '#000', beginAtZero: true }
    }
  }
}

2. 仅Y轴网格线为虚线 #

options = {
  scales: {
    y: {
      grid: {
        color: this.gridColor,
        borderDash: [1, 5],
        display: true
      },
      ticks: { color: '#2CF1A7', beginAtZero: true, maxRotation: 10 }
    },
    x: {
      grid: {
        color: '#000',
        // 不设置borderDash，默认渲染为实线
        display: true
      },
      ticks: { color: '#000', beginAtZero: true }
    }
  }
}

如果需要调整虚线的起始偏移量，可以额外添加borderDashOffset属性（值为数字，比如borderDashOffset: 2）。

内容的提问来源于stack exchange，提问作者Tuong Van