Chartjs在調整大小時更改值

Question

我正在使用chartjs在頁面上生成圖表。 如果我調整畫布的大小，則圖表會更改圖形上的值。 僅當我使用自定義插件時，它才會發生。

plugins: [horizonalLinePlugin]

如果我刪除自定義插件，則效果很好。 我也不確定應該使用哪個鈎子。 最好是我嘗試渲染的新線位於網格線之后。

為什么會這樣呢？ 這是我的代碼：

 function median(values) { values.sort(function(a, b) { return a - b; }); if (values.length === 0) return 0 var half = Math.floor(values.length / 2); if (values.length % 2) return values[half]; else return (values[half - 1] + values[half]) / 2.0; } var horizonalLinePlugin = { beforeDraw: function(chartInstance) { var yValue; var yMinValue; var yMaxValue; var yScale = chartInstance.scales["y-axis-0"]; var canvas = chartInstance.chart; var ctx = canvas.ctx; var index; var line; var style; if (chartInstance.data.datasets[0].data) { yValue = median(chartInstance.data.datasets[0].data); yMinValue = chartInstance.options.scales.yAxes[0].ticks.min; yMaxValue = chartInstance.options.scales.yAxes[0].ticks.max; ctx.lineWidth = 3; if (yValue) { ctx.beginPath(); ctx.moveTo(26, ((canvas.height - 25) * ((yMaxValue - yValue) / (yMaxValue - yMinValue)))); ctx.lineTo(canvas.width - 15, ((canvas.height - 25) * ((yMaxValue - yValue) / (yMaxValue - yMinValue)))); ctx.strokeStyle = '#f4f4f4'; ctx.fillStyle = '#f4f4f4'; ctx.stroke(); } return; } } }; //Chart.pluginService.register(horizonalLinePlugin); var randomScalingFactor = function() { return Math.ceil(Math.random() * 10.0 + Math.random() * 60.0); }; var config = { plugins: [horizonalLinePlugin], type: 'line', data: { labels: ['12.6.', '13.6.', '14.6.', '15.6.', '16.6.', '17.6.', '18.6.', '19.6.', '20.6.'], datasets: [{ label: '', backgroundColor: '#2198e8', borderColor: '#2198e8', borderWidth: 3, fill: false, pointRadius: 2, data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ], }] }, options: { responsive: true, legend: { display: false }, title: { display: false, text: '' }, tooltips: { mode: 'index', intersect: false, }, hover: { mode: 'nearest', intersect: true }, scales: { yAxes: [{ gridLines: { drawBorder: false, color: ['#f4f4f4'], lineWidth: [1] }, ticks: { min: 0, max: 100, stepSize: 10 } }] } } }; window.onload = function() { var ctx = document.getElementById('statistics-graph').getContext('2d'); window.myLine = new Chart(ctx, config); }; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script> <div class="graph-element"> <canvas id="statistics-graph"></canvas> </div> 

謝謝你的幫助。

Answer 1

問題出在您的中位數函數中。 您正在對數組進行排序，因此圖表對此做出了反應。 一個簡單的事情就是切成一個新的數組。 我將參數重命名為inValues並設置了原始值= inValues.slice（）

function median(inValues) {
  const values = inValues.slice();

  values.sort(function(a, b) {
    return a - b;
  });

  if (values.length === 0) return 0

  var half = Math.floor(values.length / 2);

  if (values.length % 2)
    return values[half];
  else
    return (values[half - 1] + values[half]) / 2.0;
}