图表注释未在角度2中显示
图表注释未在角度2中显示
提问于 2018-03-06 05:30:35
我正在尝试将chartjs- plugin -annotation插件与Chart.js和Angular结合使用。
我基于chartjs-plugin-annotation示例代码构建了一个非常精简的图表，它使用简单的HTML和JavaScript很好地工作，显示了几个点和一条水平线：
<!doctype html>
<html>
<head>
<script src="./Chart.bundle.js"></script>
<script src="./chartjs-plugin-annotation.js"></script>
</head>
<body>
<div style="width:75%">
<div>
<canvas id="canvas"></canvas>
</div>
</div>
<script>
var scatterChartData = {
datasets: [{
data: [
{ x:0, y:0 },
{ x:10, y:10 },
{ x:5, y:10 }
]
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = Chart.Scatter(ctx, {
data: scatterChartData,
options: {
scales: {
xAxes: [{
}],
yAxes: [{
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 5,
borderColor: 'rgba(255, 0, 0, 0.5)',
borderWidth: 4,
}]
}
}
});
};
</script>
</body>
</html>但是，当我尝试在Angular中做同样的事情时，图表注释并没有出现，尽管图表是按预期显示的：
import { Component, OnInit, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';
import * as annotation from 'chartjs-plugin-annotation';
@Component({
selector: 'app-graphtest',
template: `
<div style="width:75%">
<div>
<canvas #canvas></canvas>
</div>
</div>`
})
export class GraphTest implements OnInit {
constructor() {}
ngOnInit() {
let ctx = this.canvas.nativeElement.getContext('2d');
this.myScatter = Chart.Scatter(
ctx,
{
data: this.scatterChartData,
options: {
scales: {
xAxes: [{
}],
yAxes: [{
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 5,
borderColor: 'rgba(255, 0, 0, 0.5)',
borderWidth: 4,
}]
}
}
}
);
}
@ViewChild('canvas') canvas;
myScatter;
scatterChartData = {
datasets: [{
data: [
{ x:0, y:0 },
{ x:10, y:10 },
{ x:5, y:10 }
]
}]
};
}有人知道我做错了什么吗？
回答 2
Stack Overflow用户
发布于 2018-07-20 16:15:50
在App.module.ts的导入区域中，粘贴以下行import 'chartjs-plugin-annotation';
Stack Overflow用户
发布于 2018-09-05 04:17:42
添加以下行：
Chart.pluginService.register(annotation);在您的ngInit()函数的顶部，应该可以做到这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49119805
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号