Charts.js折线与数据点颜色不匹配、图例白字配置失效问题

数据点循环换色问题 #

根因很明确：你给每一条折线（dataset）的borderColor、backgroundColor、pointBackgroundColor三个属性都传了颜色数组，Chart.js对单个dataset的颜色属性有默认规则：如果传数组，就会给这条线上的每个数据点按数组顺序循环取色，自然就会出现点沿着线来回切色的情况。

修复步骤：

• 提前把你准备好的11组配色整理成独立的数组，每组存对应线条、填充、数据点的三个颜色值
• 遍历生成每一条折线配置的时候，按当前折线的索引取对应那一组的单个颜色值，赋值给三个颜色属性，绝对不要给单个折线传颜色数组

对应修复后的核心代码：

// 提前配置所有折线的配色，补全到11组即可
const linePalette = [
  { line: 'rgba(138, 20, 21, 0.8)', fill: 'rgba(138, 20, 21, 1)', point: 'rgba(138, 20, 21, 0.8)' },
  { line: 'rgba(241, 16, 22, 0.8)', fill: 'rgba(241, 16, 22, 1)', point: 'rgba(241, 16, 22, 0.8)' },
  { line: 'rgba(249, 148, 0, 0.8)', fill: 'rgba(249, 148, 0, 1)', point: 'rgba(249, 148, 0, 0.8)' },
  // 剩余8组配色按顺序补在这
]

const typeList = Object.keys(dataByTypes)
const chartData = {
  labels: years,
  datasets: typeList.map((typeName, idx) => {
    const color = linePalette[idx % linePalette.length]
    return {
      text: 'Yearly growth',
      label: typeName,
      data: dataByTypes[typeName],
      hoverBackgroundColor: 'rgba(211, 211, 211, 0.8)',
      borderColor: color.line,
      backgroundColor: color.fill,
      pointBackgroundColor: color.point,
      fill: true,
      borderWidth: 2,
      cubicInterpolationMode: 'monotone',
      stepped: false,
      borderJoinStyle: "round",
      tension: 0.2,
    }
  })
};

改完之后单条折线的线条、填充区域、数据点颜色就会完全统一，不会再循环切换。

图例白色字体不生效问题 #

你写的配置是Chart.js v2版本的旧结构，你当前用的v3+版本两个地方不对：

• 图例配置不在options根节点，要嵌套在plugins.legend路径下
• 图例文字颜色属性不是旧版的fontColor，直接用color字段

修复后的配置代码：

const chartOptions = {
  responsive: true,
  plugins: {
    legend: {
      labels: {
        color: 'white'
      }
    }
  }
};

如果暗黑模式下要改坐标轴刻度颜色，也是在对应scales配置里给ticks加color属性就行。

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