ChartJS 段错误：TS2339：类型“ScriptableLineSegmentContext”上不存在属性“图表”

Question

我在使用 chartjs 线段时遇到了一些问题：

segment: {
    borderDash: context => unreachableDash(context, [5, 5]) || [5, 0],
    borderColor: context => unreachableColor(context, "#B5B5C3") || "#3DC0FF",
    backgroundColor: (context) => {
        let {ctx, chartArea} = context.chart;
        return unreachableBgColor(context, this.getGradientUnreachable(ctx, chartArea)) || this.getGradient(ctx, chartArea)
    }
}

我需要根据值有多个渐变背景

我正在使用 TS，如果我将 backgroundColor 的上下文参数类型设置为任何或者如果我这样做，一切都工作正常

// @ts-ignore.

如果我不这样做，上下文类型是

ScriptableLineSegmentContext

，这是正确的，但在尝试访问

context.chart

时出现此错误：

TS2339: Property 'chart' does not exist on type 'ScriptableLineSegmentContext'.

有人遇到过这个问题吗？

我只尝试使用 any 类型和 @ts-ignore 并且它有效但如果有解决方法它会很酷

Answer 1

你是对的，如果这不符合 bug 的条件，那肯定是 chart.js 错失了 document 的机会 并包含在类型定义中，尤其是对于 难以处理的环境 全局变量。

源代码

在源文件中

/src/helpers/helpers.options.ts

函数

createContext

具有以下定义。

export function createContext(parentContext: object, context: object) {
   return Object.assign(Object.create(parentContext), context);
}

它被称为

/src/helpers/helpers.segment.js

const chartContext = line._chart.getContext();
//.....
segmentOptions.setContext(createContext(chartContext, {
     type: 'segment',
     p0: prev,
     p1: pt,
     p0DataIndex: (i - 1) % count,
     p1DataIndex: i % count,
     datasetIndex
})));

因此可编写脚本的上下文是图表上下文的扩展， 这在

/src/core/core.controller.js

中定义

getContext() {
    return this.$context || (this.$context = createContext(null, {chart: this, type: 'chart'}));
}

包括一个

chart

条目，其中包含对图表的引用 本身。

此行为与其他可编写脚本的上下文一致 在整个代码中，图表本身的上下文 是

createContext

被调用时的唯一实例 带有

null

第一个参数。

尴尬的选择

话虽如此，一个可能的替代方案是创建 图表分两个阶段，模式如下：

const config = {
// ....
};
const chart = new Chart('line-chart', config);
// now you have the chart reference 
chart.data.datasets[0].segment = {
   borderColor: () => ... // use chart global variable        
};
chart.update();

这很尴尬，我想它会是 角度更是如此。

打字稿

as unknown as

而不是

@ts-ignore

总之，您可以信赖您的解决方案 使用当前版本的 chart.js，它是 它不太可能在这个主要版本 (4) 中改变。

如果你想避免使用

// @ts-ignore

你可以 使用 type assertions 使其工作 类似的东西：

backgroundColor: (context) => {
    let {ctx, chartArea} = (context as unknown as {chart: Chart}).chart;
    //....
}