Невозможно использовать функцию MyChart

Question

У меня есть функция для обновления диаграммы в javascript.

Код:

    function updateChartAjaxCall(data1, data2)
    {
        //ajax call here 
        $.ajax({
            type: 'POST',
            url: 'data.php',
            dataType: 'html',
            data: {data1:data1,data2:data2},
            success:function(data){ 

                myChart.removeData();
                myChart.addData('newLabel', [23, 33, 4]);
            }, 
            error:function (xhr, ajaxOptions, thrownError){
                console.log(thrownError);
            }, 
            complete: function(){
            }
        });
        event.preventDefault(); 
    }

$(document).ready(function(){

    $.ajax({
        url: "http://localhost/chartjs/data.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var op1 = [];
            var op2 = [];

            let data_keys = Object.keys(data[0])
            console.log(data_keys)
            first = data_keys[0] //1st element
            second = data_keys[1] //2nd element

            for(var i in data) {
                op1.push(data[i][first])
                op2.push(data[i][second])

            }

         var chartdata = {
         labels: op1,
         datasets : [
             {
             label: 'SystemID and Apparent Power (VA)',
             backgroundColor: 'rgba(250, 50, 50, 0.4)',
             borderColor: 'rgba(500, 50, 50, 0.5)',
             hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
             hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
             data: op2
         } 
         ]
  };

  var ctx = document.getElementById('mycanvas').getContext('2d');

  var myChart = new Chart(ctx, {
    type: 'line',
    data: chartdata,
    options: {
    scales: {
       xAxes: [{
               ticks: {
                fontSize: 10
               }
              }],
        yAxes: [{
            ticks: {
                fontSize: 10
            }
        }]
            }
         }
      });
    },
    error: function(data) {
    console.log(data);
    }
    });


});

Ошибка, которую я получаю:

app.js:11 Uncaught ReferenceError: myChart is not defined
at Object.success (app.js:11)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at y (jquery.min.js:4)
at XMLHttpRequest.c (jquery.min.js:4)

Может кто-нибудь помочь,почему я получаю эту ошибку?Я использую библиотеку chartJS.Чего мне не хватает?

Я обновил свой код, чтобы показать объявление myChart Мне нужна глобальная функция updateChartAjaxCall, так как я вызываю ее из другого файла .html для обновления data1 и data2.

Answer 1

Ошибка возникает из-за того, что в области действия метода updateChartAjaxCall myChart не существует, поскольку вы объявили его внутри '$ (document) .ready (function () {' function

Это должно работать

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

var myChart;

function updateChartAjaxCall(data1, data2) {
    //ajax call here 
    $.ajax({
        type: 'POST',
        url: 'data.php',
        dataType: 'html',
        data: {
            data1: data1,
            data2: data2
        },
        success: function (data) {

           removeData(myChart);
           addData(myChart, 'newLabel', [23, 33, 4]);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError);
        },
        complete: function () {}
    });
    event.preventDefault();
}

$(document).ready(function () {

    $.ajax({
        url: "http://localhost/chartjs/data.php",
        method: "GET",
        success: function (data) {
            console.log(data);
            var op1 = [];
            var op2 = [];

            let data_keys = Object.keys(data[0])
            console.log(data_keys)
            first = data_keys[0] //1st element
            second = data_keys[1] //2nd element

            for (var i in data) {
                op1.push(data[i][first])
                op2.push(data[i][second])

            }

            var chartdata = {
                labels: op1,
                datasets: [{
                    label: 'SystemID and Apparent Power (VA)',
                    backgroundColor: 'rgba(250, 50, 50, 0.4)',
                    borderColor: 'rgba(500, 50, 50, 0.5)',
                    hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
                    hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
                    data: op2
                }]
            };

            var ctx = document.getElementById('mycanvas').getContext('2d');

            myChart = new Chart(ctx, {
                type: 'line',
                data: chartdata,
                options: {
                    scales: {
                        xAxes: [{
                            ticks: {
                                fontSize: 10
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                fontSize: 10
                            }
                        }]
                    }
                }
            });
        },
        error: function (data) {
            console.log(data);
        }
    });


});

Вы также можете добавить функцию utils к прототипу, чтобы использовать функцию из myChart

Chart.prototype.removeData = function() {
    this.data.labels.pop();
    this.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    this.update();
}

Chart.prototype.addData = function(label, data) {
    this.data.labels.push(label);
    this.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    this.update();
}