React TypeScript-Chartjs注释-栏注释未正确显示

问题描述

我的注释设置为：

annotation: {
  events: ["onClick"],annotations: [{
    drawTime: "afterDraw" as "afterDraw",type: "Box" as "Box",xMin: "2 Sep",xMax: "4 Sep",yMin: 0,yMax: 50,backgroundColor: "green",borderColor: "red",borderWidth: 1,onClick: function (e: any) {
    //do something...
    },},],

然后我使用以下方法初始化条形图：

<Bar
  data={data}
  height={height}
  options={options}
  plugins={[ChartAnnotation]}
 />

哪个渲染器

问题：

我无法获得框注来填充正确的空间，它只是填充了所有空间。我尝试了两个轴上的最小值/最大值的不同值，但这没什么区别。

您将看到我必须以一种奇怪的方式设置 drawTime 和 type ，否则，如果我正常设置它们，则会出现以下类型错误：

属性“类型”的类型不兼容。 类型'string'不可分配给类型'“ Box”'。 重载2之2，“（props：LinearComponentProps，context ?: any）：Bar”，出现以下错误。

我不确定我在做什么错，或者为什么它会引发类型错误。

我正在使用：

"@types/chartjs-plugin-annotation": "^0.5.1","chartjs-plugin-annotation": "^0.5.7","chart.js": "^2.9.3",

解决方法

答案是格式化y轴的刻度和标签以使用相同的格式。

通过github票解决：

https://github.com/chartjs/chartjs-plugin-annotation/issues/228