Chart.js 向 X 和 Y 軸添加方向箭頭

Question

我正在嘗試在圖表的軸上添加/繪制箭頭。 （所以他們可以看起來更像那樣）

我試圖查看文檔，但在比例部分中沒有找到任何選項。 我試圖通過使用注釋插件來做到這一點，但它不足，因為在條形圖上，箭頭似乎限制在 x 軸上，我沒有找到讓它溢出的方法。

我發現一個人有類似的問題，但它是在舊版本的庫上

我需要做一個自定義的秤課嗎？

這是我當前的測試實現

 const data = { labels: ["Label1","Label2","Label3","Label4"], datasets: [{ label: 'First Dataset', data: [1349,282,274,173], backgroundColor: ["blue"], }] }; const annotation1 = { type: 'line', borderColor: "red", borderWidth: 3, arrowHeads: { end: { enabled: true, // borderColor: 'green' } }, scaleID: 'y', value: 0 }; const annotation2 = { type: 'line', borderColor: "red", borderWidth: 3, arrowHeads: { end: { enabled: true, } }, xMax: 0, xMin: 0, xScaleID: 'x', yMax: 1500, yMin: 0, yScaleID: 'y' }; const ctx= document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: data, options: { padding: 10, scales: { x: { grid: { display: false, borderColor: "red", borderWidth: 3, z:4, }, grace: '10%' }, y: { grid: { display: false, borderColor: "red", borderWidth: 3, padding: 100, }, ticks: { display: false, padding: 100, }, grace: '10%', padding: 100, }, }, plugins: { legend: { display: false, }, tooltip: { enabled: false, }, datalabels: { labels: { value: { align: 'end', anchor: 'end', color: "black", formatter: function (value, ctx) { return value; }, }, } }, annotation: { drawTime: 'beforeDraw', annotations: { annotation1, annotation2 } }, } }, plugins: [ChartDataLabels], });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script> <canvas id="myChart" ></canvas>

Answer 1

好的，我確實找到了一種方法，通過使用這個視頻的一些內容。

在這里，當我重做上一個示例並添加插件“customBorder”時

 const data = { labels: ["Label1", "Label2", "Label3", "Label4"], datasets: [{ label: 'First Dataset', data: [1349, 282, 274, 173], backgroundColor: ["blue"], }] }; const customBorder = { id: 'customBorder', afterDatasetsDraw(chart, args, pluginOptions) { const { ctx, chartArea: { top, bottom, left, right, width, height } } = chart; ctx.save(); ctx.beginPath(); ctx.lineWidth = 3; ctx.strokeStyle = "red"; ctx.moveTo(left - 1, top + 3); ctx.lineTo(left + 5, top + 10); ctx.moveTo(left + 1, top + 3); ctx.lineTo(left - 5, top + 10); ctx.moveTo(left, top + 5); ctx.lineTo(left, bottom); ctx.lineTo(right - 5, bottom); ctx.moveTo(right - 3, bottom + 1) ctx.lineTo(right - 10, bottom - 5); ctx.moveTo(right - 3, bottom - 1); ctx.lineTo(right - 10, bottom + 5); ctx.stroke(); ctx.closePath(); } } const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: data, options: { scales: { x: { grid: { drawBorder: false, display: false, }, grace: '15%' }, y: { grid: { drawBorder: false, display: false, }, ticks: { display: false, }, grace: '15%', }, }, plugins: { legend: { display: false, }, tooltip: { enabled: false, }, datalabels: { labels: { value: { align: 'end', anchor: 'end', color: "black", formatter: function(value, ctx) { return value; }, }, } }, } }, plugins: [ChartDataLabels, customBorder], });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script> </script> <canvas id="myChart"></canvas>

我認為這不是最好的方法，但它確實有效。