ChartJS 在 beforeDraw 中更新值

Question

為了讓我的問題更簡單，我創建了一個 jsFiddle，保存在

https://jsfiddle.net/k3tgzyLc/1/

所以我創建的是一個帶有背景顏色的 chartJS，這些是使用

ctx.fillStyle = 'rgba(255, 26, 104, 0.2';
ctx.fillRect(left, y.getPixelForValue(18), width, y.getPixelForValue(14) - y.getPixelForValue(18));
ctx.restore();

您還會看到我添加了一個按鈕，單擊該按鈕會加載新數據。

這一切都很好。

我遇到的問題是我需要更新 fillRect 代碼中的值

當我點擊按鈕時，如何刪除所有矩形然后繪制新的矩形？

我試過點擊function

    var canvas = document.getElementById("myChart");
    canvas.clearRect();

但這似乎沒有做任何事情，而且，我很困惑如何在刪除舊矩形后重新繪制矩形。

我上周才開始使用 chartJS，所以我仍在努力解決它。

預先感謝您的任何幫助

如前所述，我嘗試使用

var canvas = document.getElementById("myChart");
canvas.clearRect();

但這似乎沒有做任何事情，而且，我很困惑如何在刪除舊矩形后重新繪制矩形。

Answer 1

要移除canvas上繪制的所有矩形，可以使用CanvasRenderingContext2D object的clearRect方法，由canvas元素的getContext方法返回。 clearRect方法取四個arguments：待清除矩形左上角的x、y坐標，矩形的寬、高。 您可以使用 canvas 元素的寬度和高度屬性來清除整個 canvas。

下面是一個示例，說明如何使用 clearRect 方法刪除所有矩形並重新繪制它們：

const clearCanvas = () => {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
};

const redrawRectangles = () => {
  // Redraw the rectangles here
};

const updateData = () => {
  clearCanvas();
  redrawRectangles();
};

document.getElementById('update-button').addEventListener('click', updateData);

要重新繪制矩形，您只需調用與最初繪制矩形相同的代碼即可。

Answer 2

您不應該在插件中對值進行硬編碼，而是可以使用插件的選項 object，您可以在更新圖表數據時設置和更新值：

 const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu'], datasets: [{ label: 'Old Data', data: [18, 12, 6, 9], backgroundColor: [ 'rgba(255, 26, 104, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255, 26, 104, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }; const canvasBackgroundColor = { id: 'canvasBackgroundColor', beforeDraw(chart, args, opts) { const { ctx, chartArea: { top, bottom, left, right, width }, scales: { x, y } } = chart; ctx.save(); ctx.fillStyle = 'rgba(255, 26, 104, 0.2'; ctx.fillRect(left, y.getPixelForValue(opts.pinkMax), width, y.getPixelForValue(opts.pinkMin) - y.getPixelForValue(opts.pinkMax)); ctx.fillStyle = 'rgba(55, 126, 104, 0.2'; ctx.fillRect(left, y.getPixelForValue(opts.greyMax), width, y.getPixelForValue(opts.greyMin) - y.getPixelForValue(opts.greyMax)); ctx.restore(); } } const config = { type: 'line', data, options: { scales: { y: { beginAtZero: true } }, plugins: { canvasBackgroundColor: { pinkMax: 18, pinkMin: 14, greyMax: 14, greyMin: 0 } } }, plugins: [canvasBackgroundColor] }; const myChart = new Chart( document.getElementById('myChart'), config ); function updateChart() { myChart.data.labels = ['Jan', 'March', 'April', 'May']; myChart.data.datasets[0].label = ['New Data']; myChart.data.datasets[0].data = [1, 2, 3, 4]; myChart.options.plugins.canvasBackgroundColor.pinkMax = 4; myChart.options.plugins.canvasBackgroundColor.pinkMin = 2; myChart.options.plugins.canvasBackgroundColor.greyMax = 2; myChart.options.plugins.canvasBackgroundColor.greyMin = 0; myChart.update(); };

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <canvas id="myChart"></canvas> <button onClick="updateChart()">Update</button>