Chart.js中为解析CSV生成的各列数据集设置不同点样式与颜色的问题

问题原因 #

原有代码中每个数据集的borderColor都传入了包含3个色值的数组，Chart.js会默认将数组内的颜色轮流应用到同一个数据集的每个数据点上，就是导致同一条折线点颜色交替的原因。

实现方案 #

通过i匹配对应列序号的if判断拆分赋值逻辑完全可行，实现代码如下：

var data = Papa.parse(csvString).data;
var timeLabels = data.slice(1).map(function(row) { return row[0]; }); 

var datasets = [];
for (var i = 1; i < data[0].length; i++) {
  let currentBorderColor, currentPointStyle;
  // 按列序号匹配对应样式，可按需修改各列的样式参数
  if (i === 1) {
    currentBorderColor = "#3e95cd";
    currentPointStyle = "rectRot";
  } else if (i === 2) {
    currentBorderColor = "#8e5ea2";
    currentPointStyle = "circle";
  } else if (i === 3) {
    currentBorderColor = "#c45850";
    currentPointStyle = "triangle";
  }
  datasets.push(
    {
      label: data[0][i],
      data: data.slice(1).map(function(row) {return row[i]}),
      fill: false,
      borderColor: currentBorderColor, // 传入单个色值而非数组
      borderWidth: "2",
      pointRadius: '0',
      pointStyle: currentPointStyle
    }
  )
}

扩展优化写法（列数较多时更易维护） #

如果后续可能新增数据列，也可以提前定义样式数组，直接用索引取值即可，无需编写多分支判断：

var data = Papa.parse(csvString).data;
var timeLabels = data.slice(1).map(function(row) { return row[0]; }); 

// 样式顺序和CSV数据列（跳过第一列时间列）从左到右的顺序对应
const columnStyles = [
  {borderColor: "#3e95cd", pointStyle: "rectRot"},
  {borderColor: "#8e5ea2", pointStyle: "circle"},
  {borderColor: "#c45850", pointStyle: "triangle"}
]

var datasets = [];
for (var i = 1; i < data[0].length; i++) {
  const style = columnStyles[i-1];
  datasets.push(
    {
      label: data[0][i],
      data: data.slice(1).map(function(row) {return row[i]}),
      fill: false,
      borderColor: style.borderColor,
      borderWidth: "2",
      pointRadius: '0',
      pointStyle: style.pointStyle
    }
  )
}

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