Chart.JS - multiple - box - annotations - displays only the last box
Question
Chart.JS - 多个 - 框 - 注释 - 只显示最后一个框
1 answers
solution1
1 2021-07-05 12:42:45
2 things. First you tried defining the scales config in the v2 way, this doesnt work anymore. You shouldnt define your scale as time since you dont use time objects, to use the timeScale you need to provide moment/luxon or any other date lib objects and the corresponding date adapter so chart.js can automatically make ticks for the scale.
Also as defined in the chart.js annotation docs ( https://www.chartjs.org/chartjs-plugin-annotation/guide/types/box.html#configuration ) you need to provide a number for the xMin and xMax prop so you can give it the label, you give it the index of where it needs to draw it.
Live example:
var timeFormat = { 'millisecond': 'HH:mm', 'second': 'HH:mm', 'minute': 'HH:mm', 'hour': 'HH:mm', 'day': 'HH:mm', 'week': 'HH:mm', 'month': 'HH:mm', 'quarter': 'HH:mm', 'year': 'HH:mm', }; const options = { type: 'line', data: { labels: ['6:38', '6:38', '6:38', '6:38', '6:39', '6:39', '6:39', '6:39', '6:39', '6:39', '6:40', '6:40', '6:40', '6:40', '6:40', '6:40', '6:41', '6:41', '6:41', '6:41', '6:41', '6:41', '6:42', '6:42', '6:42', '6:42', '6:42', '6:42', '6:43', '6:43', '6:43', '6:43', '6:43', '6:43', '6:44', '6:44', '6:44', '6:44', '6:44', '6:44', '6:45', '6:45', '6:45', '6:45', '6:45', '6:45', '6:46', '6:46', '6:46', '6:46', '6:46', '6:46', '6:47', '6:47', '6:47', '6:47', '6:47', '6:47', '6:48', '6:48', '6:48', '6:48', '6:48', '6:48', '6:49', '6:49', '6:49', '6:49', '6:49', '6:49', '6:50', '6:50', '6:50', '6:50', '6:50', '6:50', '6:51', '6:51', '6:51', '6:51', '6:51', '6:51', '6:52', '6:52', '6:52', '6:52', '6:52', '6:52', '6:53', '6:53', '6:53', '6:53', '6:53', '6:53', '6:54', '6:54', '6:54', '6:54', '6:54', '10:54'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 2, 19, 3, 5, 2, 2, 19, 3, 5, 2, 2, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { // New way of defining scales x: { grid: { color: 'red' } }, y: {} }, plugins: { annotation: { annotations: { box1: { type: "box", drawTime: "beforeDatasetsDraw", xMin: '6:39', // doesnt work, needs point index xMax: '7:00', // doesnt work, needs point index yMin: 2, yMax: 10, backgroundColor: "red", }, box2: { type: "box", drawTime: "beforeDatasetsDraw", xMin: 7, xMax: 10.14, yMin: 2, yMax: 10, backgroundColor: "blue", } } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); const chart = new Chart(ctx, options); document.getElementById("tt").addEventListener("click", () => { chart.options.plugins.annotation.annotations.box1.yMax = 16; chart.update(); }); document.getElementById("rr").addEventListener("click", () => { chart.options.plugins.annotation.annotations.box1.yMax = 8; chart.update(); });
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <button id="tt">Update annotation to 16</button> <button id="rr">Update annotation to 8</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.js"></script> </body>
Basic fiddle with example of the time scale implementation with moment: https://jsfiddle.net/Leelenaleee/bza0v3rc/11/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.