问题标签 [chartjs-plugin-annotation]

我有一个基于接收到的数据的动态图表生成组件。我在组件内创建一个图表实例并填写属性。我将 chartjs-annotate-plugin 导入为

并像这样注册图表插件：

我试图在图表实例化之前移动它，但有趣的是，虽然我确实看到了注释，但它也会导致控制台错误，指出注释不是 ChartOptions 上的属性：

有任何想法吗？

从赏金编辑：这不是OP 的代码，但这里有一些代码可以重现 Angular 8 和 ChartJS Annotation 插件 0.5.7 中的问题：

使用此代码，我在控制台中得到了上面指定的错误，但它按预期工作。如果我将annotation:部分移动到plugins:，错误消失，但注释不再显示：

我ng2-charts用来在我的 Angular 应用程序中绘制条形图。在某些时候，我不得不在我的图表中添加静态线条，我决定使用chartjs-plugin-annotation. 将这两个库连接在一起没有很好的文档记录，但经过一番谷歌搜索后，我最终能够让它工作。

这是一个简约的演示。然而，虽然它在 stackblitz 上运行良好，但我本地机器上的 IDE 抱怨接口annotation不期望ChartOptions：

编译器也是这样：

尽管此警告不会阻止项目编译，但它看起来仍然不正确。

我检查了ChartOptions，定义在 中node_modules/@types/chart.js/index.d.ts，实际上，它没有annotation（也不应该，因为这个接口是在chart.js库中定义的，谁不也不应该知道关于插件细节的任何事情）：

我试图将零件重新定位到annotation其他地方（chartjs-plugin-annotation文档说它应该在下面plugins，这完全有意义），但在所有其他位置它只是被忽略了。所以最终，为了摆脱警告，我只是删除了: ChartOptions部分 - 也就是说，而不是这个：

我只写了这个：

这删除了警告，但它仍然看起来不够整洁。有谁知道如何正确使用这个插件？

我试图弄清楚当我将鼠标悬停/鼠标悬停在我绘制的垂直线注释上时如何添加工具提示：

任何人都可以解释如何做到这一点？

我使用带有注释插件的 react-chartjs-2 创建了一个图表。该文档简单地指出：

这是否意味着我可以将数组中的每个值放在单独的行中？当我使用它时，所有值都打印为一个逗号分隔的行。

我的代码：

我试图在我的图表上画一条垂直线。ng2-charts为了实现这一点，我安装了这个chartjs-plugin-annotation包。不幸的是，它不起作用，我无法弄清楚出了什么问题。

我的配置和这里的demo基本一样。

问题出在ChartOptions中：我不断收到此错误：

可能值得注意的是，声明了import * as annotations from 'chartjs-plugin-annotation';“注释”，但从未读取过它的值。

在 Angular 项目中，我正在使用 chart.js 最新版本2.9.3实现图表

我完美地实现了圆环图，堆积条形图，现在我必须实现在y轴上包含数据标签的堆积条形图。

因此，从使用chartjs-plugin-datalabels插件的 chart.js 文档中，我尝试在此处显示标签，我得到了 cli error decalare module chart.js

为了解决上述错误，我安装了“@types/chart.js”：“^2.9.27”，遵循此解决方案https://github.com/chartjs/chartjs-plugin-datalabels/pull/121#issuecomment-473327301

现在在我的 package.json

-

但是在安装 @types 之后，我遇到了很多之前没有的 cli 错误

node_modules/@types/chart.js/index.d.ts:297:9 297 工具提示？：ChartTooltipOptions；

什么是这些错误，如何解决这些错误，，

但在 stackerzbilz Angular 10 项目中，它工作正常，不了解问题的根本原因 https://stackblitz.com/edit/angular-10-base-template-2hul5i

我的 Package.json

tsconfig.json

tsconfig.app.json

添加 "@types/chart.js": "^2.9.27" 后，出现错误图像 2，如果我没有添加错误图像 1

请给任何建议

提前致谢

我chartjs-plugin-annotations在 Vue.js 应用程序中使用时遇到了问题

一段时间以来，我们已经成功地将 ChartJS 图表嵌入到我们的 Vue 应用程序中，并在组件部分中config定义了图表。data ()

但是，当我们在chartjs-plugin-annotation插件中添加时，除非我们在本地定义配置并new Chart直接返回，否则无法使注释正常工作。这显然会导致更新图表出现问题。

这是我们与注释一起使用的基本模型

一个完整的例子小提琴是here

当我们静态使用图表时，这很好（或至少有效），但是我们至少有一个页面，我们需要根据页面上的选择来更改图表。在这种情况下，new Chart渲染新数据但也保留旧图表。然后浏览器在鼠标悬停时在图表之间滑动。这可以在上面的示例中看到。

理想情况下，我们应该update()在这种情况下使用 chartJS 的方法，但是由于我们没有将图表分配给全局，我们在创建后无法访问它

有什么想法吗？

我有一个带有 html 和脚本部分的 index.php。我几乎没有带有图表的画布，现在我需要导入插件“chartjs-plugin-annotation”，它看起来像典型的 ES6 模块。如果我使用 React，解决方案会很简单，我只需使用 npm 将其添加到项目中即可。但我不知道如何在我的网站上做到这一点。

我试图以某种方式这样做，但它没有奏效。甚至尝试添加 type="module" 但它也没有奏效。

路径类似于：/chartjs-annotation-plugin/src/annotation.js 等。链接到 github 上的插件：chartjs-plugin-annotation。我在 javascript 方面不是很有经验，因为我是后端开发人员，所以这也可能是问题所在。

I have a chartjs graph with an x-axis consisting of the hours of the past three days. Because it is 3 days, each hour appears in the x-axis 3 times. I want to draw vertical lines at each 12:00am, but I am not sure how to differentiate the first 12:00am with the second and third.

}

Here is what the graph currently looks like

Would each time need a unique label, or is it possible to differentiate between the 3 identical x-axis times without changing their x-axis labels?

我为我糟糕的英语感到抱歉。
我正在尝试使用 vue-chartjs 和 chartjs-plugin-annotation 在图表中显示一条水平线。
出现图形并应用选项，但由于注释中的设置不起作用，因此未出现水平线。
如果有人知道如何解决这个问题，请告诉我。
版本和代码如下

Chart.js v2.9.4
chartjs-plugin-annotation v0.5.7

图表.js