Vue+vue-chartjs+Chart.js：如何为各数据集设置不同点样式？

以下是几个需要排查的关键点和解决方法：

1. 确保点的可见性（pointRadius设置） #

如果pointRadius被设置为0，点会被完全隐藏，此时pointStyle自然不会显示。即使默认值是3，也可能被全局配置或其他代码覆盖，所以需要在每个数据集里显式设置：

datasets: [
  {
    // ...其他配置
    pointStyle: 'triangle',
    pointRadius: 6, // 必须大于0，确保点能显示
    pointHoverRadius: 8 // 可选，hover时的点大小
  }
]

2. 检查pointStyle的取值合法性 #

Chart.js支持的内置点样式包括：'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', 'dash'。如果拼写错误（比如写成'triange'），会默认 fallback 到圆形。

3. 确认配置层级是否正确 #

pointStyle需要直接写在每个数据集对象中，而不是全局的options或scales配置里。正确的结构如下：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月'],
    datasets: [
      {
        label: '销量A',
        data: [12, 19, 3, 5],
        borderColor: '#ff6384',
        pointStyle: 'circle',
        pointRadius: 6
      },
      {
        label: '销量B',
        data: [7, 11, 15, 9],
        borderColor: '#36a2eb',
        pointStyle: 'triangle',
        pointRadius: 6
      }
    ]
  },
  options: {
    // 图表标题、坐标轴等配置
  }
});

4. 排查版本兼容性问题 #

如果使用的是Chart.js v2.x及更早版本，需检查全局options.elements.point是否设置了强制覆盖的配置。v3+版本中，数据集的配置优先级高于全局元素配置，不会出现覆盖问题。如果是旧版本，建议升级到稳定版，或清理全局冲突配置。

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