ChartJS 3垂直注释
ChartJS 3垂直注释
提问于 2022-03-22 23:04:38
我正在尝试将我的图表升级到v3，并使用这个注释插件。尝试了几种不同的方式，但似乎无法让垂直注释显示出来。尝试过添加xScaleID/yScaleID，但是我相信在v3中，x/y是新的缺省值，所以无论如何都会期望这些默认值是默认的。
将整个过程简化为这个JSFiddle
const data = {
"labels": [
"07/09/2020",
"14/09/2020",
"21/09/2020",
"28/09/2020",
"05/10/2020",
"19/10/2020",
"02/11/2020",
"09/11/2020",
"16/11/2020",
"23/11/2020",
"30/11/2020",
"07/12/2020",
"14/12/2020",
"04/01/2021",
"11/01/2021",
"18/01/2021",
"25/01/2021",
"01/02/2021",
"08/02/2021",
"22/02/2021",
"01/03/2021",
"08/03/2021",
"15/03/2021",
"22/03/2021",
"29/03/2021",
"19/04/2021",
"26/04/2021",
"03/05/2021",
"10/05/2021",
"17/05/2021",
"24/05/2021",
"07/06/2021",
"14/06/2021",
"21/06/2021"
],
"datasets": [{
"label": [
"Information"
],
"data": [
"90",
"92",
"94.29",
"100",
"100",
"93.85",
"90",
"95.38",
"90",
"98.95",
"100",
"100",
"100",
null,
null,
"60",
null,
null,
null,
null,
"80",
"100",
null,
"100",
null,
"80",
"100",
null,
"100",
"100",
"100",
"100",
"100",
"100"
],
fill: false,
borderColor: 'rgb(75, 192, 192)'
}]
}
var chart = new Chart('chart1', {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
bezierCurve: false,
spanGaps: true,
scales: {
y: {
beginAtZero: true
}
}
},
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
mode: 'vertical',
xMin: '09/11/2020',
xMax: '09/11/2020',
borderColor: "#56A6A6",
borderWidth: 10
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="chart1" height="400">
</canvas>
如果有人有任何想法，请告诉我。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-23 07:56:54
首先，您在错误的空间中配置了选项，插件选项必须位于options对象的内部。您使用的插件部分是用于包含内联插件的数组，其次，您需要在chart.js之后包含注释插件，因为需要首先加载chart.js，因为注释插件使用了来自chart.js的一些功能：
const data = {
"labels": [
"07/09/2020",
"14/09/2020",
"21/09/2020",
"28/09/2020",
"05/10/2020",
"19/10/2020",
"02/11/2020",
"09/11/2020",
"16/11/2020",
"23/11/2020",
"30/11/2020",
"07/12/2020",
"14/12/2020",
"04/01/2021",
"11/01/2021",
"18/01/2021",
"25/01/2021",
"01/02/2021",
"08/02/2021",
"22/02/2021",
"01/03/2021",
"08/03/2021",
"15/03/2021",
"22/03/2021",
"29/03/2021",
"19/04/2021",
"26/04/2021",
"03/05/2021",
"10/05/2021",
"17/05/2021",
"24/05/2021",
"07/06/2021",
"14/06/2021",
"21/06/2021"
],
"datasets": [{
"label": [
"Information"
],
"data": [
"90",
"92",
"94.29",
"100",
"100",
"93.85",
"90",
"95.38",
"90",
"98.95",
"100",
"100",
"100",
null,
null,
"60",
null,
null,
null,
null,
"80",
"100",
null,
"100",
null,
"80",
"100",
null,
"100",
"100",
"100",
"100",
"100",
"100"
],
fill: false,
borderColor: 'rgb(75, 192, 192)'
}]
}
var chart = new Chart('chart1', {
type: 'line',
data: data,
options: {
plugins: {
annotation: {
annotations: {
line1: {
type: 'line',
mode: 'vertical',
xMin: '09/11/2020',
xMax: '09/11/2020',
borderColor: "#56A6A6",
borderWidth: 10
}
}
}
},
responsive: true,
maintainAspectRatio: false,
bezierCurve: false,
spanGaps: true,
scales: {
y: {
beginAtZero: true
}
}
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<canvas id="chart1" height="400">
</canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71579966
复制相关文章
相似问题
腾讯云开发者
