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

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

我在chartjs的线段上遇到了一些问题:

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

我需要有多个梯度背景取决于值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具有以下定义。

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

/src/helpers/helpers.segment.js调用

  1. const chartContext = line._chart.getContext();
  2. //.....
  3. segmentOptions.setContext(createContext(chartContext, {
  4. type: 'segment',
  5. p0: prev,
  6. p1: pt,
  7. p0DataIndex: (i - 1) % count,
  8. p1DataIndex: i % count,
  9. datasetIndex
  10. })));

因此,脚本上下文是图表上下文的扩展,定义在/src/core/core.controller.js

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

以包括chart条目,该条目包含对图表本身的引用。
此行为与整个代码中的其他脚本上下文一致,图表本身的上下文是使用null第一个参数调用createContext时的唯一示例。

尴尬的选择

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

  1. const config = {
  2. // ....
  3. };
  4. const chart = new Chart('line-chart', config);
  5. // now you have the chart reference
  6. chart.data.datasets[0].segment = {
  7. borderColor: () => ... // use chart global variable
  8. };
  9. chart.update();

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

Typescript类型Assert代替@ts-ignore

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

  1. backgroundColor: (context) => {
  2. let {ctx, chartArea} = (context as unknown as {chart: Chart}).chart;
  3. //....
  4. }
展开查看全部

相关问题