如何在ChartJS中修改图表边框为点线而非实线样式

你的代码存在两处需要调整的配置：

• 当前borderWidth设为了0，边框宽度为0自然无法显示任何边框样式，需要调整为大于0的数值，比如borderWidth: 2
• Chart.js v3版本没有borderStyle这个配置项，要实现点线/虚线边框，需要使用borderDash属性，该属性接收一个数值数组，分别定义实线段长度、间隙长度，常规点线效果可以设置为borderDash: [2, 2]

修正后的完整JS代码如下：

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: '#ffec87',
      borderWidth: 2, // 调整边框宽度为可见数值
      borderDash: [2, 2] // 点线样式配置
    }]
  },
});

如果需要修改其他部分的线条为点线样式，可以对应调整配置：

• 折线图的数据线样式：直接在数据集配置中添加borderDash即可
• 坐标轴、网格线的点线样式：在options.scales.[x/y轴id].grid配置中添加borderDash属性即可

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