Отображение точечных данных при наведении мыши на Chart.JS - PullRequest
Новая
       13

Отображение точечных данных при наведении мыши на Chart.JS

0 голосов
/ 16 октября 2018

Когда я наведите курсор мыши на моем графике, я хочу получить данные о текущем месте на графике (данные оси x / y).Приведенный ниже код прекрасно работает, например, когда цикл for установлен на 1 раз (когда график статичен и не движется), но когда я устанавливаю цикл for на большее число (чтобы график не был статичным,он будет перемещаться), пока он перемещается, поле данных содержит ошибки и плохо показывает данные оси, по которым я нахожусь.

это мой HTML-код: 

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="client.js"></script>
</head>
<body>
    <button>click me to alert lmao</button>
    <div class="container">
        <canvas id="line-chart" width="800" height="450"></canvas>
    </div>
</body>
</html>

и это моекод JavaScript: 

$(document).ready(function(){
    var myChart = document.getElementById('line-chart').getContext('2d');
    var foo = new Array(10);
    for(var i=0;i<foo.length;i++){
        foo[i] = i+1;
    }
    var chart = new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            labels: foo,
            datasets: [{
                data: [],
                label: "try1",
                borderColor: "#ff0000",
                fill: false
            }
            ]
        },
        options: {
            tooltips: {
                mode: 'index',
                intersect: false
            },
            hover: {
                mode: 'index',
                intersect: false
            },
            elements: {
                point:{
                    radius: 0
                }
            }
        }   
    });
    $("button").click(function(){
        for(var i = 0; i < 1000; i++)
        {
            call();
        }    
    });
    var arr1 = [1,2,3,4,5,6,7,8,9,10]
    var arr2 = [10,9,8,7,6,5,4,3,2,1]
    function  aarr1() {
        $.ajax({

            complete: function(data){
                var chartData = chart.data;
                chartData.datasets[0].data = arr1;
                chart.update();
            }
        });

    }
    function  aarr2() {
        $.ajax({
            complete: function(data){
                var chartData = chart.data;
                chartData.datasets[0].data = arr2;
                chart.update();
            }
        });

    }
    function call(){
        aarr1();
        aarr2();
    }
});
...