javascript - 当数据表是全局的时，谷歌图表不起作用

Question

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

我遇到的是，如果我在 drawChart() 内部构建一个数据表(和数据 View )功能，一切正常。见 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));
        }

但是，如果我将用于创建数据表和数据 View 的代码移到函数范围之外，则它不起作用。见 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 语句返回的 promise ，而不是使用回调语句。

如以下代码段所示...

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));
}