angular - 注释插件中的 Chart.js 行未出现
问题描述
在 Angular 应用程序中使用 chart.js 的注释插件,所以如果这有点具体,我很抱歉。注释插件应该做的是在 x 轴上的 value=1 处创建一条垂直线。
然而此时什么都没有出现。没有抛出错误或类似的东西,但是没有行。
我图表上的 x 轴是浮动形式,所以我尝试过value=1.0
,但这并没有更成功。我应该指出,colorschemes 插件运行良好,所以插件也不是以某种方式被禁用。
import * as Chart from 'chart.js';
import 'chartjs-plugin-colorschemes';
import 'chartjs-plugin-annotation';
[...]
let massPopChart = new Chart(this.myChart, {
type: 'bubble',
data: {
labels:['Jobs']
},
options: {
plugins:{
colorschemes: {
scheme: 'brewer.YlOrBr9'
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: 1,
borderColor: 'red',
borderWidth: 5,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}, legend: {
display: false
}, title: {
display: true,
text: 'Location Quotient of Jobs in Region'
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "# of Jobs"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "LQ"
}
}]
}
}
});
this.jobTitles.forEach((value) => {
var r = parseInt(this.regionData.merged_titles[value])/100;
if(r < 5) r = 5;
else if (r>15) r = 15;
massPopChart.data.datasets.push({
label: value,
data: [{
x: parseFloat(this.regionData.location_quotient[value]),
y: parseInt(this.regionData.merged_titles[value]),
r: r
}]
});
massPopChart.update();
});
我的图表制作得很好。所有的点都出现了,颜色由颜色方案插件定义,但是在 x 轴上的 1 处没有实心红线。
解决方案
如果将来有人遇到这个问题,我偶然发现的解决方案是转到node_modules > @types > chart.js > index.d.ts
并将该行annotation?: Object;
放在interface ChartOptions
第 217 行周围的部分中。然后我像这样重组了代码......
let massPopChart = new Chart(this.myChart, {
type: 'bubble',
data: {
labels:['Jobs']
},
options: {
plugins:{
colorschemes: {
scheme: 'brewer.YlOrBr9'
}
}, legend: {
display: false
}, title: {
display: true,
text: 'Location Quotient of Jobs in Region'
}, annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: 1,
borderColor: 'red',
borderWidth: 5,
label: {
enabled: false,
content: 'Test label'
}
}]
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "# of Jobs"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "LQ"
}
}]
}
}
});
随着“注释”部分从“插件:”部分移至通用“选项”部分。
推荐阅读
- javascript - 奇怪的 Nodejs 内存泄漏
- webdriver-io - webdriverIO 和 saucelab 集成不起作用
- python - 如何从 Python 中的列表中提取变化的文本?
- python - 如何从数据库中获取一个国家的城市列表?
- asp.net - 在 asp.net 框架 Web 应用程序中上传图像文件
- powershell - 从 Powershell ISE 和 Windows 资源管理器运行脚本的不同行为
- javascript - 关于 Discord 中的嵌入 (JAVASCRIPT)
- css - Buey Modal 滚动条出现在两个轴上,我只想要 y 轴滚动条
- registry - 两个问题 - 我正在尝试修改注册表,但出现错误
- google-apps-script - Google Docs / Apps 脚本:插入带有样式的文本