ChartJS 3 垂直注釋

Question

我正在嘗試將我的 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>

如果有人有任何想法，請告訴我。

Answer 1

首先，您在錯誤的空間中配置了選項，插件選項必須在選項 object 內設置為 go。您使用的插件部分用於包含內聯插件的數組，其次，您需要在 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>