chart.js - перезапустить значения при наведении курсора

Question

Я использовал chart.js для отображения адаптивных данных. Все работает отдельно, 1 вещь ... когда моя мышь находится над графиком, загрузите график для первых данных ... Кто-нибудь знает, как решить эту проблему ??

код Chart.js, который я использую:

$(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 из базы данных, но чтобы вы лучше знали мою проблему, я создаю скрипку: Поэтому после того, как вы измените данные диаграммы и указатель мыши, вы поймете, что я имею в виду.

скрипка: Здесь

И снайпер:

$(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)'
      		}
    		}
		});
	}


});

[class*="col-"] {
	box-sizing: border-box;
	display: inline-block;
    float: left;
    padding: 5px;
    margin: 0 auto;
    text-align: center;
}
h5{
  cursor:pointer;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="col-8" style="height: 400px"><canvas id="bar-chart" width="100%" height="40px"></canvas></div>
			<div class="col-4" id="today" style="height: 50px" ><h5>today</h5></div>
			<div class="col-4" id="yersterday" style="height: 50px" ><h5>yersterday </h5></div>
			<div class="col-4" id="month" style="height: 50px" ><h5>this month</h5></div>
			<div class="col-4" id="lastmonth" style="height: 50px" ><h5>last month</h5></div>

Answer 1

Вы должны уничтожить предыдущий график. Вы можете сделать это, объявив переменную для диаграммы. Посмотрите код ниже, переменная "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)'
        }
        }
    });
}


});