Chart.js画布，如何在没有影响我的悬停事件的先前数据的情况下交换数据？

Question

使用chart.js我已经构建了一些条形图。 我交换数据以显示点击的不同图表。 加载页面显示一切正常。

<div id="chart-container">
  <button class="dataSelector" onclick="dataSwap('webDevData')">WebDev Tools</button>
  <button class="dataSelector" onclick="dataSwap('graphicsData')">Graphic Design Tools</button>
  <div class="chart-window">
    <canvas id="myChart"></canvas>
  </div>
</div>

加载页面后，将初始化图表并创建并正确呈现图表对象。 在调用我的swapData函数时，其他数据集被正确呈现，但此后旧数据集仍然响应将鼠标悬停在图表上。

我的功能看起来像这样。

<script type="text/javascript">

//set both sets of data in variables

var lablesWebDev = ["CSS", "JAVASCRIPT", "PYTHON", "PHP", "RUBY", "SQL", "PERL"];
var dataWebDev = [3.5, 3.5, 1, 1.5, 0.5, 1, 0.5];
var lablesGraphic = ["Photoshop", "Illustrator", "GIMP", "BLENDER", "FreeCAD", "Photography"];
var dataGraphic = [1.5, 1.1, 2.5, 2.0, 0.8, 3.0];


function dataSwap(dataType){

//check argument for which data set to render

  if (dataType == "webDev"){
    var labelsChosen = lablesWebDev;
    var dataChosen = dataWebDev;
  }else if (dataType == "graphic"){
    var labelsChosen = lablesGraphic;
    var dataChosen = dataGraphic;
  }

//grab the canvas and initialize the chart following documentation.

Chart.defaults.global.defaultFontColor = 'black';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {                    //variables placed below
        labels: labelsChosen,
        datasets: [{
            label: 'Years Experience',
            data: dataChosen,
            backgroundColor: 'rgba(255, 50, 80, 0.5)',
            borderColor: 'rgba(255, 50, 80, 1)',
            borderWidth: 1
         }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
}dataSwap("webDev");
</script>

如何重新初始化此图表对象以使先前的数据集不再存在？ 或者至少如何禁用悬停事件以便我完全绕过这个问题？

谢谢你的智慧！

Answer 1

可以通过.clear（）方法清除图表。 这将清除现有图表。 还有一个选项.destroy（）来销毁图表。

//This would destroy the chart.
    var mychart = new Chart(xyaz, myNinjaConfig);
    mychart.destroy();


//This would clear. the chart.
    const mychart = new Chart (xyaz, myNinjaConfig);
    mychart.clear();

Answer 2

您可以将选项更改为仅侦听click事件：

    options: {
        events: ['click'],
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
    }

这只会在您单击时更改显示。

Answer 3

我无法通过将myChart声明为var或const来访问任何方法。 最后我发现通过声明

this.myChartInstance = new Chart(ctx, { ... //WORKS!!
var myChartInstance = new Chart(ctx, { ... //doesnt work
const myChartInstance = new Chart(ctx, { ... //doesnt work

我现在可以从控制台调用destroy方法。

在重新初始化我的数据之前添加条件检查，效果很好!! 我可以将鼠标悬停在图表上并交换数据而不会产生任何冲突。 解：

if (this.myChartInstance) {
    this.myChartInstance.destroy();
}
this.myChartInstance = new Chart(ctx, { ...