ChartJS段错误:TS2339:类型“ScriptableLineSegmentContext”上不存在属性“chart”

snz8szmq  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(175)

我在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)
    }
}

我需要有多个梯度背景取决于值like so
我使用的是TS,如果我将backgroundColor的上下文参数类型设置为any或者设置为// @ts-ignore.,则一切正常
如果我不这样做,上下文类型是ScriptableLineSegmentContext,这是正确的,但我在尝试访问context.chart时得到这个错误:TS2339: Property 'chart' does not exist on type 'ScriptableLineSegmentContext'.
有人已经遇到过这个问题吗?
我只尝试使用any类型和@ts-ignore,它工作了,但如果有一个变通方案,那就太酷了

11dmarpk

11dmarpk1#

你是对的,如果这不符合一个错误,它肯定是一个错过的机会图表。js来记录并包含在类型定义中,特别是对于使用全局变量很麻烦的环境。

源码

在源文件/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条目,该条目包含对图表本身的引用。
此行为与整个代码中的其他脚本上下文一致,图表本身的上下文是使用null第一个参数调用createContext时的唯一示例。

尴尬的选择

话虽如此,一个可能的替代方案是在两个阶段中创建图表,模式如下:

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();

这是尴尬的,因为它是,我想这将是更有Angular 。

Typescript类型Assert代替@ts-ignore

总之,您可以信赖您的解决方案与当前版本的图表一起工作。js,并且它不太可能在这个主要版本中改变(4)。
如果你想避免使用// @ts-ignore,你可以使用类型Assert(x as unknown as T)来使它工作,比如:

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

相关问题