React TypeScript - Chartjs 注释 - 条形注释未正确显示

Question

我的注释设置为：

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]}
 />

哪些呈现：

问题：

我无法让方框注释填写正确的 space，它只是填写了所有 space。我在两个轴上尝试了 min/max 的不同值，但没有区别。

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

Types of property 'type' are incompatible. Type 'string' is not assignable to type '"box"'. Overload 2 of 2, '(props: LinearComponentProps, context?: any): Bar', gave the following error.

我不确定我做错了什么，或者为什么会抛出类型错误。

我正在使用：

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

Answer 1

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

通过 github 工单解决：

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

React TypeScript - Chartjs 注释 - 条形注释未正确显示

React TypeScript - Chartjs Annotations - Bar Annotation not showing correctly

reactjs

typescript

charts

react-chartjs-2