代码之家 › 专栏 › 技术社区 › Ant Arni

当悬停在上时,动态折线图重影回旧数据

chart.js canvas html javascript

0

Ant Arni · 技术社区 · 7 年前

我在谷歌上搜索过这个问题,我知道大多数时候解决问题的方法是使用 .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 回复 | 直到 7 年前

1

2

Kunal Khivensara 7 年前

好吧,这不是销毁chart的正确方法,chart变量是一个局部变量,你要为局部变量创建一个新的图表,然后再次销毁它,这并不意味着它已经销毁了之前创建的所有其他实例。其中一个解决方案将创建一个全局变量来保存图表,并在每次调用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();
}

2

1

Joseph Cho 7 年前

.destroy() 方法正确。当我遇到和你一样的问题时,我最终听从了别人的建议,毁掉了整个世界 canvas 元素并重新呈现它。

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);

如果你能想出办法让我知道工作正常!我也很想这样做,但我一辈子都想不出来。

https://jsfiddle.net/Lmp52046/1/