Javascript chart.js-鼠标悬停时重新启动值

我使用chart.js显示响应数据。每件事都是分开的一件事。。。当我的鼠标在图表上时，第一个数据的图表加载。。有人知道如何解决这个问题吗

Chart.js代码i使用：

$(function() {
            setTimeout(function() {

            x = 2328;
            y = 5567;
            z = 12334;
            loadChart();}, 1000 );

        $("#today").on('click',function(){
            x = 8;
            y = 7;
            z = 54;
            loadChart();
        });
    $("#yersterday").on('click',function(){
            x = 28;
            y = 37;
            z = 80;
            loadChart();
        });$("#month").on('click',function(){
            x = 178;
            y = 172;
            z = 824;
            loadChart();
        });$("#lastmonth").on('click',function(){
            x = 568;
            y = 507;
            z = 1214;
            loadChart();
        });
        function loadChart(){
        new Chart(document.getElementById("bar-chart"), {
            type: 'bar',
            data: {
                labels: ["Deskop", "Tablet", "Mobile"],
                datasets: [
                {
                 label: "Page views",
                backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                data: [x,y,z]
                }
                ]
            },
            options: {
            legend: { display: false },
            title: {
                display: true,
                text: 'Page views (since lunch)'
            }
            }
        });
    }


});

通常，我使用ajax调用从数据库获取json数据内容，但为了让您更好地了解我的问题，我创建了fiddle： 所以在你们改变图表数据和鼠标悬停图表之后，你们就会明白我的意思了

小提琴：

还有斯奈普：

$（函数（）{
setTimeout（函数（）{
x=2328；
y=5567；
z=12334；
负荷图（）；}，1000）；
$（“#今天”）。在（'click'，function（）上{
x=8；
y=7；
z=54；
负荷图（）；
});
$（“#yersterday”）。在（'click'，function（）上{
x=28；
y=37；
z=80；
负荷图（）；
})$（“#月”）。在（'click'，function（）上{
x=178；
y=172；
z=824；
负荷图（）；
})$（“#上个月”）。在（'click'，function（）上{
x=568；
y=507；
z=1214；
负荷图（）；
});
函数负载图（）{
新图表（document.getElementById（“条形图”）{
类型：'bar'，
数据：{
标签：[“桌面”、“平板电脑”、“手机”]，
数据集：[
{
标签：“页面浏览量”，
背景色：[“3e95cd”、“8e5ea2”、“3cba9f”、“e8c3b9”、“c45850”]，
数据：[x，y，z]
}
]
},
选项：{
图例：{display:false}，
标题：{
显示：对，
文本：“页面浏览量（自午餐后）”
}
}
});
}
});
[class*=“col-”]{
框大小：边框框；
显示：内联块；
浮动：左；
填充物：5px；
保证金：0自动；
文本对齐：居中；
}
h5{
光标：指针；
}
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}

今天
昨天
这个月
上个月
您必须销毁上一张图表。您可以这样做，为图表声明一个变量。请参阅下面的代码，变量“myChart”发挥了神奇的作用

$(function() {

        var myChart = null;

        setTimeout(function() {

        x = 2328;
        y = 5567;
        z = 12334;
        loadChart();}, 1000 );

    $("#today").on('click',function(){
        x = 8;
        y = 7;
        z = 54;
        loadChart();
    });
$("#yersterday").on('click',function(){
        x = 28;
        y = 37;
        z = 80;
        loadChart();
    });$("#month").on('click',function(){
        x = 178;
        y = 172;
        z = 824;
        loadChart();
    });$("#lastmonth").on('click',function(){
        x = 568;
        y = 507;
        z = 1214;
        loadChart();
    });
    function loadChart(){

// if the chart is not undefined (e.g. it has been created)
// then destory the old one so we can create a new one later
if (myChart) {
    myChart.destroy();
}

    myChart = new Chart(document.getElementById("bar-chart"), {
        type: 'bar',
        data: {
            labels: ["Deskop", "Tablet", "Mobile"],
            datasets: [
            {
             label: "Page views",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [x,y,z]
            }
            ]
        },
        options: {
        legend: { display: false },
        title: {
            display: true,
            text: 'Page views (since lunch)'
        }
        }
    });
}


});