我有一个 Angular 7 (Ionic 4) 项目,我在其中试用 Chart.js 并且需要能够在饼图上自定义绘制一些标签,正如我所询问的那样 here .
我被告知我需要为此使用一个单独的包,但我无法使用 npm 包为 Angular 项目导入工作。
我有以下版本:
"chart.js": "^2.8.0",
"chartjs-plugin-datalabels": "^0.6.0",
....
"@angular/*": "^7.2.2",
"typescript": "~3.1.6"
我已经按照建议尝试了here ,但我得到两个错误。
首先vscode报错如下:
另外,按照描述添加额外的 here .
在别处据说是这样导入的:
导入 'chartjs-plugin-datalabels';
但是我得到了编译错误:
`[ng] ERROR in node_modules/chartjs-plugin-datalabels/types/index.d.ts(5,16): error TS2665: Invalid module name in augmentation. Module 'chart.js' resolves to an untyped module at 'D:/dev/ionic/chartjstest/node_modules/chart.js/dist/Chart.js', which cannot be augmented.`
我怎样才能让它工作?
最佳答案
您可以像这样导入指令:
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
您可以像这样在 ChartOptions
中使用插件:
chartOptions: ChartOptions = {
...
plugins: {
pluginDataLabels
}
另一种方法是在图表中调用它:
public barChartPlugins = [pluginDataLabels];
你可以看到它完成了here .
但是,这两种方式都是全局声明的。我能想出不在所有图表中看到它们的唯一方法是不显示它们。
chartOptions: ChartOptions = {
...
plugins: {
datalabels: {
display: false
},
}
这也解决了@NakulSharma 的问题。可以看到插件选项here .
关于javascript - 如何将 Chart.js chartjs-plugin-datalabels npm 包导入 Angular 7 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55622806/