javascript - Chartjs 在调整大小时更改值

Question

我正在使用 Chartjs 在页面上生成图表。如果我调整 Canvas 大小，图表会更改图表上的值。仅当我使用自定义插件时才会发生这种情况。

plugins: [horizonalLinePlugin]

如果我删除自定义插件，它就可以正常工作。我也不确定应该使用什么钩子(Hook)。如果我尝试渲染的新线位于网格线后面，那就最好了。

为什么会发生这种情况？这是我的代码:

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

问题出在你的中位数函数上。您正在对数组进行排序，因此图表会对此使用react。一个简单的事情就是切片成一个新数组。我将参数重命名为 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;
}