Question

我的图表（使用ChartJs）遇到问题，一旦我在图表上编辑了数据，如果将鼠标悬停在同一图表上，它有时会出现故障以显示以前的数据。

我已经搜索了这个问题，并且我知道大多数情况下解决方案是使用.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>

Answer 1

好吧，这不是销毁图表的正确方法，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();
}

Answer 2

您正在正确使用class MenuSystem(QMenu): pass方法。当我遇到与您相同的问题时，我最终遵循了别人的建议，并从DOM中销毁了整个ui.menuBar.setStyleSheet("MenuSystem::item {background-color: rgb(80, 255, 80)}")元素，然后重新呈现它。

我会更改您的.destroy()函数，使其看起来像这样：

canvas

如果您能弄清楚如何使genCharts()正常工作，请告诉我！我也想那样做，但是我一生都无法解决。

在这里拨弄：https://jsfiddle.net/Lmp52046/1/

悬停在ChartJS动态折线图后会重影到旧数据

2 个答案: