react-chartjs-2混合类型图表dataset设置type时触发类型错误如何解决？

使用<Bar>专用组件时，TypeScript默认约束所有数据集的type属性只能为bar或未定义，你为单个数据集指定type: 'line'的操作和默认类型约束冲突，因此触发类型校验报错。

方案1：使用通用Chart组件替代专用Bar组件（最推荐） #

放弃使用封装好的<Bar>专用组件，改用底层通用Chart组件，手动指定默认图表类型即可支持混合数据集类型：

1. 调整导入逻辑，注册需要的图表元素：

// 原有导入：import { Bar } from 'react-chartjs-2'
// 替换为导入通用Chart组件
import { Chart } from 'react-chartjs-2'
// 注册需要的图表核心元素
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js'

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  Title,
  Tooltip,
  Legend
)

2. 替换组件使用方式：

<Chart type='bar' data={chartData} options={chartOptions} />

修改完成后TS会自动允许数据集覆盖type属性为其他合法图表类型，你的原有数据集配置不需要做额外调整。

方案2：为数据集补充类型声明 #

如果不想替换组件，可以手动为chartData指定更宽松的联合类型：

import type { ChartData } from 'chart.js'

const chartData: ChartData<'bar' | 'line'> = {
  labels: ['2021-10-29', '2021-10-30', '2021-10-31', '2021-11-01', '2021-11-02', '2021-11-03', '2021-11-04'],
  datasets: [
    {
      label: 'Coaching',
      data: [rand(), rand(), rand(), rand(), rand(), rand(), rand()],
      backgroundColor: `rgb(98,100,24)`,
    },
    {
      label: 'Away',
      data: [rand(), rand(), rand(), rand(), rand(), rand(), rand()],
      backgroundColor: `rgb(202,214,219)`,
    },
    {
      label: 'Total Call Count',
      data: [rand(), rand(), rand(), rand(), rand(), rand(), rand()],
      borderColor: `rgb(${rand()},${rand()},${rand()})`,
      fill: false, // 不需要折线区域填充可加这个配置
      type: 'line' as const, // 加as const让TS识别为字面量类型，避免string类型报错
    },
  ]
}

方案3：临时类型断言（快速修复，不推荐长期使用） #

如果仅需要快速跑通测试，可以直接给data添加类型断言绕过校验，缺点是会丢失后续的类型提示：

<Bar data={chartData as any} options={chartOptions} />

额外提示：你原有代码中第一个数据集的backgroundColor写为rgb(98.100.24)，分隔符误用了点，需要改为逗号rgb(98,100,24)才能正常渲染颜色。

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