Chartjs изменяет значения при изменении размера - PullRequest
Новая
       12

Chartjs изменяет значения при изменении размера

0 голосов
/ 02 ноября 2018

Я использую 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>

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 02 ноября 2018

Проблема в вашей медиане. Вы сортируете массив, и диаграмма реагирует на это. Простая вещь, которую нужно сделать, - это вставить новый массив. Я переименовал параметр в 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;
}
...