ChartJS 3 垂直注释
我正在尝试将我的 Chartjs 升级到 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>如果有人有任何想法，请告诉我。
I am trying to upgrade my chartjs to v3 and with that the annotations plugin. Tried a few different ways but just cannot seem to get the vertical annotation to show. Tried explicitilty adding xScaleID/yScaleID but I believe that in v3 x/y are the new defaults so would have expected those to be the defaults anyway.
Simplified the whole thing down to this 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>If anyone has any ideas then please let me know.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先，您在错误的空间中配置了选项，插件选项必须位于选项对象内部。您使用的插件部分是包含内联插件的数组，其次您需要在chart.js之后包含注释插件，因为需要首先加载chart.js，因为注释插件使用chart.js中的一些函数：
First you configured the options in the wrong space, the plugin options have to go inside of the options object. The plugins section what you used is for an array containing inline plugins, secondly you need to include the annotation plugin after chart.js since chart.js needs to be loaded first because the annotation plugin uses some functions from chart.js: