当数据表为全局时Google图表不起作用

Question

我正在为我的网站开发一个小型HTML应用程序，该应用程序进行了一些模拟并将其绘制为图形（使用Google图表）。所有数据都将源自页面上的JavaScript代码（即，我不是在尝试从数据库或类似的数据中提取数据）。因此，我想从其他函数访问数据表，以便在运行新的仿真时可以更新数据。

我遇到的问题是，如果我在drawChart()函数内部构建数据表（和数据视图），则一切正常。请参阅this jsfiddle或以下代码：

//Google charts stuff
google.charts.load('current', { 'packages': ['line', 'corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
            var forceChartDiv = document.getElementById('force_chart_div');

            var sim_data = new google.visualization.DataTable();
            sim_data.addColumn('number', 'Elapsed Time (sec)');
            sim_data.addColumn('number', "Total Force");
            sim_data.addColumn('number', "M1 Force(Each)");

            sim_data.addRows([
                [0.0, -.5, 5.7],
                [0.1, .4, 8.7],
                [0.2, .5, 12]
            ]);

            var forceDataView = new google.visualization.DataView(sim_data);
            forceDataView.setColumns([0, 1, 2]);

            var forceChartOptions = {
                chart: {title: 'Simulation Results: Force'},
                width: 900,
                height: 500,
                series: {
                    // Gives each series an axis name that matches the Y-axis below.
                    0: { axis: 'Total' },
                    1: { axis: 'Individual' }
                },
                axes: {
                    // Adds labels to each axis; they don't have to match the axis names.
                    y: {
                        Total: { label: 'Total Force (Newtons)'},
                        Individual: { label: 'Per-Motor Force (Newtons)'}
                    }
                }
            };

            var forceChart = new google.charts.Line(forceChartDiv);   
            forceChart.draw(forceDataView, google.charts.Line.convertOptions(forceChartOptions));
        }

但是如果我将用于创建数据表和数据视图的代码移到了功能范围之外，则无法使用。请参阅this jsfiddle或以下代码：

var sim_data;
var forceDataView;

//Google charts stuff
google.charts.load('current', { 'packages': ['line', 'corechart'] });

sim_data = new google.visualization.DataTable();
sim_data.addColumn('number', 'Elapsed Time (sec)');
sim_data.addColumn('number', "Total Force");
sim_data.addColumn('number', "M1 Force(Each)");

sim_data.addRows([
                [0.0, -0.5, 5.7],
                [0.1, 0.4, 8.7],
                [0.2, 0.5, 12]
                    ]);

forceDataView = new google.visualization.DataView(sim_data);
forceDataView.setColumns([0, 1, 2]);

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
            var forceChartDiv = document.getElementById('force_chart_div');

            var forceChartOptions = {
                chart: {title: 'Simulation Results: Force'},
                width: 900,
                height: 500,
                series: {
                    // Gives each series an axis name that matches the Y-axis below.
                    0: { axis: 'Total' },
                    1: { axis: 'Individual' }
                },
                axes: {
                    // Adds labels to each axis; they don't have to match the axis names.
                    y: {
                        Total: { label: 'Total Force (Newtons)'},
                        Individual: { label: 'Per-Motor Force (Newtons)'}
                    }
                }
            };

            var forceChart = new google.charts.Line(forceChartDiv);   
            forceChart.draw(forceDataView, google.charts.Line.convertOptions(forceChartOptions));
        }

这两个示例都使用以下HTML：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="force_chart_div"></div>

我认为这可能与回调函数的执行顺序有关。但是将其放在代码的不同位置似乎并没有改变任何东西。在我的整个项目中，我竟然添加了一个名为drawChart()的按钮，只是为了进行检查，但这也无济于事。

取决于我放置回调函数调用的位置，我将获得红色的“未定义数据表”警报，该警报显示该图表应在网页上的位置。这几乎告诉了我我已经怀疑过的内容，但是我不知道如何解决。任何帮助，将不胜感激。顺便说一下，我是一个很棒的JS新手，所以对我轻松一点。

Answer 1

您的直觉是正确的，您必须等待回调完成，在使用google.visualization或google.charts名称空间之前。

与代码放置相比，它在计时方面要做的更多。

除了使用回调语句，我们还可以使用load语句返回的承诺。

如以下代码段...

var sim_data;
var forceDataView;

//Google charts stuff
google.charts.load('current', {
    packages: ['line', 'corechart']
}).then(function () {
    sim_data = new google.visualization.DataTable();
    sim_data.addColumn('number', 'Elapsed Time (sec)');
    sim_data.addColumn('number', "Total Force");
    sim_data.addColumn('number', "M1 Force(Each)");

    sim_data.addRows([
                    [0.0, -0.5, 5.7],
                    [0.1, 0.4, 8.7],
                    [0.2, 0.5, 12]
                        ]);

    forceDataView = new google.visualization.DataView(sim_data);
    forceDataView.setColumns([0, 1, 2]);
});

function drawChart() {
    var forceChartDiv = document.getElementById('force_chart_div');

    var forceChartOptions = {
        chart: {title: 'Simulation Results: Force'},
        width: 900,
        height: 500,
        series: {
            // Gives each series an axis name that matches the Y-axis below.
            0: { axis: 'Total' },
            1: { axis: 'Individual' }
        },
        axes: {
            // Adds labels to each axis; they don't have to match the axis names.
            y: {
                Total: { label: 'Total Force (Newtons)'},
                Individual: { label: 'Per-Motor Force (Newtons)'}
            }
        }
    };

    var forceChart = new google.charts.Line(forceChartDiv);   
    forceChart.draw(forceDataView, google.charts.Line.convertOptions(forceChartOptions));
}