Отображение диаграммы (.js) при наведении курсора мыши на: TypeError: t is null - PullRequest
Новая
       33

Отображение диаграммы (.js) при наведении курсора мыши на: TypeError: t is null

0 голосов
/ 29 октября 2019

Я обнаружил ошибку, которую, похоже, не могу исправить.

Я пытаюсь отобразить диаграмму (Chart.js), когда моя мышь наведена на холст. При наведении курсора мыши на холст я получаю ошибку TypeError: t is null.

Ошибка: {"message": "Ошибка скрипта.", "Имя файла": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"," lineno ": 0, "colno": 0}

Ошибка не из моего собственного кода, а из chart.js.

Код, который я использовал, можно найти ниже. 

<!doctype html>
<html>
<head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<style>
    #canvas{border:1px solid lightgray;}
</style>
</head>
<body>
<script>
window.onload=function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

        //Mouse over
        canvas.addEventListener("mouseover",function(){
            draw(ctx);
            console.log("mosue hover")

            //Show chart
            new Chart(document.getElementById("line-chart"), {
                type: 'line',
                data: {
                    //x
                    labels: [1571677338438,
                        1571680924962,
                        1571684668435],
                    datasets: [{
                        data: [8179.6471707218025,
                            8194.415903357343,
                            8175.8698340503815],
                        borderColor: "#3e95cd",
                        fill: true
                    }
                    ]
                },
                options: {
                    title: {
                        display: false,
                        text: 'World population per region (in millions)'
                    },
                    legend: {
                        display: false,
                    }
                }
            });


        });


        //Mouse over ends
        canvas.addEventListener("mouseout",function(){
            draw(ctx);
            console.log("end hover");
            console.log("remove chart.");
        });


        draw(ctx);

    function draw(ctx){
        ctx.beginPath();
        ctx.closePath();
    }

};  // end window.onload

</script>

    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

1 Ответ

0 голосов
/ 29 октября 2019

Вы выбираете неинтересный элемент line-chart, когда я изменяю его на canvas, график показывал up.it должен быть: 

//Show chart
new Chart(document.getElementById("canvas"), {
        type: 'line',
        data: {
        .
        .
...