在google上使用chartEvents -react图表和类型记录
在google上使用chartEvents -react图表和类型记录
提问于 2022-02-07 13:21:43
我有一个反应类型记录项目，在其中我正在使用react-google-charts。基于读取一个为JS工作的类似的讨论，我正在对打字本进行同样的尝试。
我有下面的图表：
<Chart
chartType="ColumnChart"
width="80%"
height="80%"
data={data}
options={options}
chartEvents={[
{
eventName: "ready",
callback: ({ chartWrapper, google }) => {
const chart = chartWrapper.getChart();
google.visualization.events.addListener(chart, "click", (e) => {
console.log("CLICK");
});
}
}
]}
/> 我所犯的错误是：
Argument of type '{ removeAction: (actionID: string) => void; getSelection: () => { row?: any; column?: any; }[]; setAction: (ChartAction: GoogleChartAction) => void; getImageURI: () => void; clearChart: () => void; }' is not assignable to parameter of type 'GoogleChartWrapper | GoogleChartControl | GoogleChartEditor'.
Type '{ removeAction: (actionID: string) => void; getSelection: () => { row?: any; column?: any; }[]; setAction: (ChartAction: GoogleChartAction) => void; getImageURI: () => void; clearChart: () => void; }' is missing the following properties from type 'GoogleChartWrapper': draw, toJSON, clone,在google.visualization.events.addListener(chart, "click", (e) => {线路上。
EDIT``获得一个更简单的错误版本，您可以查看示例这里
我原以为addListener -将是google namespace 被称为下的那个。我在上面发现的其他例子表明，至少对React + JS来说，这是可行的。例如，代码这里。
但我不能正确地处理这些类型。
chartEvents是ReactGoogleChartEvent的数组。这意味着回调被定义为这里。所以谷歌是GoogleViz类型的，GoogleVizEvents和GoogleVizEventName中没有click。
我不知道那些张贴的例子是如何起作用的。
我遗漏了什么？
编辑关于react-google-charts：对我来说还是没用的。源回购的另一个例子
编辑2
本质上，问题是getChart()返回这。我不知道如何使用它来为其他属性(如onmouseover, click等)创建侦听器，因为上面的讨论正在得到或解决方案(如这一个)。
回答 1
Stack Overflow用户
发布于 2022-11-29 22:44:43
ts库面临一个类型问题：https://github.com/rakannimer/react-google-charts/issues/545
{
eventName: "ready",
callback: ({ chartWrapper, google }) => {
const chart = chartWrapper.getChart();
// the ts library is facing a type issue
// https://github.com/rakannimer/react-google-charts/issues/545
(google.visualization.events as any).addListener(
chart,
"onmouseover",
(e: Event) => {
console.log("onmouseover", e);
drawCurrentTime(ref, currentTimeLabel)
}
);
},
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71019278
复制相关文章
相似问题
腾讯云开发者
