javascript - 程序绘制完Google Charts后如何赋值？

Question

我知道这听起来有点奇怪，但我在这里有一段代码:

let globalResult = [];
let defaultData = ["None", 1200, 1200, 1200, 1200, 1200, 1200, 1200,
1200, 1200, 1200, 1200];
$(document).ready(() => {
    // set a listener on the textbox
    $('#input').on("change", (evt) => {
        let text = $('#input').val();
        // the {text: text} sends a parameter named text with the
        // value of what was typed in the textbox
        $.get("/display", {text: text})
            .done((data) => {
                globalResult = data['result'];
                $('#input').val('');   // reset the textbox
                //Draw Graph
                google.charts.load('current', {'packages':['corechart']});
                google.charts.setOnLoadCallback(drawChart);

                function drawChart() {
                    //Chart stuff.... Doesn't matter
                    //It's programmed to Draw Line with defaultData and globalResult
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                    chart.draw(data, options);
                    //Swap Value here:
                    defaultData = globalResult;
                }

            })

我尝试在绘制图表后交换 defaultData 和 globalResult，但是在交换数据时总是绘制新图表，从而导致图表中断(就像另一条线刚刚死在图画中间，留下一半的线卡在那里)。如果我尝试将它们放在函数drawChart之外，它将绘制两条相同的线，中间有另一个模具。而且我也无法将其放置在 $.get() 范围之外，因为不会绘制图表。我该如何解决这个问题？

Answer 1

加载语句 (google.charts.load) 将等待文档准备就绪，
在执行回调之前，或者 promise 它返回...
因此，不需要 --> $(document).ready

首先使用 Promise 加载 google，
然后创建图表并保存引用以供以后使用，
这将允许您使用任何数据绘制相同的图表

推荐类似于以下的设置...

let globalResult = [];
let defaultData = ["None", 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200, 1200];

google.charts.load('current', {
  packages: ['corechart']
}).then(() => {
    // save reference to chart here
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    $('#input').on("change", (evt) => {
        let text = $('#input').val();
        // the {text: text} sends a parameter named text with the
        // value of what was typed in the textbox
        $.get("/display", {text: text})
            .done((data) => {
                globalResult = data['result'];
                $('#input').val('');   // reset the textbox

                //Chart stuff....
                chart.draw(data, options);

                //Swap Value here:
                defaultData = globalResult;
            });

    });
});