Динамическая линейная диаграмма ChartJS, возвращающаяся к старым данным при наведении на - PullRequest
Новая
       7

Динамическая линейная диаграмма ChartJS, возвращающаяся к старым данным при наведении на

0 голосов
/ 16 октября 2018

У меня проблема с моей диаграммой (с использованием ChartJs), когда после того, как я отредактировал данные на диаграмме, при наведении курсора на эту же диаграмму иногда возникают глюки для отображения предыдущих данных.

IЯ погуглил проблему, и я знаю, что решение в большинстве случаев заключается в использовании .destroy(), но по какой-то причине (может быть, я не поставил ее в нужное место?), это не работает для меня.Мой настоящий код очень длинный и сложный, поэтому я взял несколько битов и сделал массив случайным образом, чтобы сделать его простым.Основная проблема все еще должна быть там. 

function genCharts() {
    var colours = ['#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149']

    var chartTheme = {
        type: 'line',
        data: {
            labels: ['3.1', '3.2'],
        },
        options: {
            legend: {
                display: false
            },
            tooltips: {
                xPadding: 15,
                yPadding: 15,
                titleFontColor: 'rgb(256,256,256)',
                backgroundColor: 'rgba(67, 183, 249,0.8)',
                displayColors: false,
                cornerRadius: 3,
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'PRICE'
                    }
                }]
            }
        },
    };

    var chartId = document.getElementById('chart').getContext('2d');

    var chart = new Chart(chartId, chartTheme);

    chart.destroy();

    chart = new Chart(chartId, chartTheme);

    var array = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
    var array2 = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];

    var i;
    for (i = 0; i < array.length; i++) {
        var newData = {
            data: [array[i], array2[i]],
            label: 'random number',
            pointStyle: 'rectRot',
            pointRadius: 5,
            pointBorderWidth: 5,
            pointHoverBorderColor: 'rgba(256,256,256)',
            pointHoverRadius: 8,
            pointHoverBorderWidth: 8,
            borderColor: colours[i]
        }

        chart.data.datasets.push(newData);
    }

    chart.update();
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <input type='button' value='generate' id='button' onclick='genCharts()'>
    <div style='height:200px; width: 200px;'>
        <canvas width='10' height='10' id='chart' style='height:10px; width: 100px;'></canvas>
    </div>
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js'></script>
<script src='scriptOne.js'></script>

</html>

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Что ж, это неправильный способ уничтожения диаграммы, переменная диаграммы - это локальная переменная, и вы создаете новую диаграмму для локальной переменной и снова ее уничтожаете, что не означает, что она уничтожила все другие ранее созданные экземпляры.,Одно из решений - создать глобальную переменную для хранения диаграмм и уничтожать ее каждый раз, когда вызывается genCharts ().Вот скрипка -> http://jsfiddle.net/srgw2y7m/

Надеюсь, это поможет! 

var chart;

function genCharts() {

  if (chart) {
    chart.destroy();
  }

  var colours = ['#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149']

  var chartTheme = {
    type: 'line',
    data: {
      labels: ['3.1', '3.2'],
    },
    options: {
      legend: {
        display: false
      },
      tooltips: {
        xPadding: 15,
        yPadding: 15,
        titleFontColor: 'rgb(256,256,256)',
        backgroundColor: 'rgba(67, 183, 249,0.8)',
        displayColors: false,
        cornerRadius: 3,
      },
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'PRICE'
          }
        }]
      }
    },
  };

  var chartId = document.getElementById('chart').getContext('2d');

  chart = new Chart(chartId, chartTheme);

  var array = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
  var array2 = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];

  var i;
  for (i = 0; i < array.length; i++) {
    var newData = {
      data: [array[i], array2[i]],
      label: 'random number',
      pointStyle: 'rectRot',
      pointRadius: 5,
      pointBorderWidth: 5,
      pointHoverBorderColor: 'rgba(256,256,256)',
      pointHoverRadius: 8,
      pointHoverBorderWidth: 8,
      borderColor: colours[i]
    }

    chart.data.datasets.push(newData);
  }

  chart.update();
}
0 голосов
/ 16 октября 2018

Вы правильно используете метод .destroy().Когда я столкнулся с той же проблемой, что и вы, я закончил тем, что следовал рекомендациям других людей и удалял весь элемент canvas из DOM и перерисовывал его.

Я бы изменил вашу функцию genCharts(), чтобы она выглядела так: 

$('#chart').remove();
$('#canvasContainer').append("<canvas width='10' height='10' id='chart' style='height:10px; width: 100px;'></canvas>");

var chartId = document.getElementById('chart').getContext('2d');
var chart = new Chart(chartId, chartTheme);

Если вы можете понять, как заставить .destroy() работать правильно, дайте мне знать!Я бы тоже хотел сделать это таким образом, но не смог понять это для моей жизни.

Скрипка здесь: https://jsfiddle.net/Lmp52046/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...