Chartjs在调整大小时更改值

Question

I'm using chartjs for generating charts on the page. If I resize the canvas the chart change the values on the graph. It happens only if I use my custom plugin.

plugins: [horizonalLinePlugin]

If I remove custom plugin it works fine. I'm also not sure what hook should I use. It would be best if the new line I try to render will be behind the grid lines.

Why is this happening? Here is my code:

 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> 

Thanks for any help.

Answer 1

The problem is in your medians function. You are sorting the array, and so the chart is reacting to that. A simple thing to do would be to slice into a new array. I renamed the paramater to inValues and the set the original values = 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;
}