ChartJS 工具提示回调无法识别元数据(TS 2339)

eeq64g8w 于 2023-01-09 发布在 Chart.js

关注(0)|答案(1)|浏览(219)

- bounty将在2天后过期**。回答此问题可获得+50声望奖励。guy希望引起更多人关注此问题。

我有以下玩具数据：

export const playData = {
  datasets: [
    {
      label: 'Dataset 1',
      showLine: true,
      data: [{ x: 1, y: 10, name: 'John' }, { x: 2, y: 5, name: 'Linda' }, { x: 3, y: 7, name: 'Erin' }, { x: 4, y: 4, name: 'Chloe' }, { x: 5, y: 8, name: 'Paul' }],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    
};

然后，我尝试创建一个显示此数据的自定义工具提示，它的工作原理与预期一致：

export function Chart(props: { chartData: ChartData }) {
  return <Scatter
    data={props.chartData}
    options={{
      responsive: true,
      scales: {
        x: {
          title: {
            display: true,
            text: 'Age (years)'
          },
        },
        y: {
          title: {
            display: true,
            text: 'Change in Height (inches)'
          }
        }
      },
      plugins: {
        legend: {
          position: 'top' as const,
        },
        tooltip: {
          callbacks: {
            label: (context) => {
              return [context.raw.name, `age: ${context.parsed.x} years`, `height change: ${context.parsed.y} in`]
            }
          }
        }
      },
    }}
  />;
}

但是TS在最后的context.raw.name下面划线并说
类型"unknown"上不存在属性"name"。ts（2339）
我该怎么补救呢？

chart.js

来源：https://stackoverflow.com/questions/74883697/tooltip-callback-cannot-recognize-metadata-ts-2339

1条答案

按热度按时间

gab6jxml1#

您可以通过扩展已在使用的自定义接口来创建自己的自定义接口，并将您添加的自定义选项添加到数据集中：

import { Chart, TooltipItem  } from 'chart.js';

interface CustomTooltipItem extends TooltipItem<'scatter'> {
  raw: {
    x: number,
    y: number,
    name: string,
  }
}

const ctx = document.getElementById("myChart") as HTMLCanvasElement;
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
      datasets: [{
        label: '# of Votes',
        data: [{ x: 1, y: 10, name: 'John' }, { x: 2, y: 5, name: 'Linda' }, { x: 3, y: 7, name: 'Erin' }, { x: 4, y: 4, name: 'Chloe' }, { x: 5, y: 8, name: 'Paul' }],
      }]
    },
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: (context: CustomTooltipItem) => {
              return [context.raw.name, `age: ${context.parsed.x} years`, `height change: ${context.parsed.y} in`]
            }
          }
        }
      }
    }
});

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENYBo4BUIQA2MwYAkjAKYhxwC+cAZlBDQOQDGGsAdAFYBnNgG4AsACgJwAHZUojdB0ooArgJit8REuSo1KADyrSAJgLwFipCtQA8bAR3Qw5bAHyIJtKOgDuALk9xWloDQOkVEAAjSigsLxCAT3DImLiE2ml0EEpA9SgZAHN44PoJOgkJDghpdTgOGAM4AF44EwgOSMpZHkLKGABRQmpumAAhRLITAAoAIhBEtEwYWYBKOHRzAAlcAFkAGWR0aQA3TaGR2TFxatr4BaXYFrhpSl8UbhhphoMcBAy4DBEmBcnAHE4XLE2CUQm1nOhAv9SrCTPCBP0BIEANpI2GwwjoGKEQJsADEcAgjDgADUIFQhDC8bRUTAEXAcXAwnAAIw4ZI8gAMOCyORJACkIKhpGx6H9OYEAEx8wIAVmF2VBbH2MlRMrocq5AGZlXAAOzq0VggYFaWyxDyuAAFhNzpeGpJaEIEEoeoNqpNAA4LZqAAroFSEPUAXUZsLoUYB+oBEDAJBqmKCTLAhBUhRkGdxTMBlh0iIBTKchEIUUUAGsC+WiwSiYFvjUqEZAsg1BoQForLpqOtmh5C0W8VB+iooNJ2bcOzAeD5fDwRZQcAADdB9QIAEgQ88Mi7AmHRJh4BgYiUop43m9QlGAhVQ8C4xx3cH3h6MPBPUDPPCJAwMgbgmyLjmU4FMhUUEhDB0GJuUqzCEAA

赞(0）回复(0）举报 2023-01-09

我来回答

ChartJS 工具提示回调无法识别元数据(TS 2339)

1条答案

相关问题

热门标签

最新问答