javascript - 如何使用 Google Charts API 绘制两张 Material 图表而不一张为空？

Question

我正在尝试使用 Google Charts API 绘制两个图表。我这样设置 HTML:

<div id="page_views" data-title="{{ report['page_views']['title'] }}" data-labels="{{ report['page_views']['labels'] }}" data-rows="{{ report['page_views']['rows'] }}"></div>
<div id="event_views" data-title="{{ report['event_views']['title'] }}" data-labels="{{ report['event_views']['labels'] }}" data-rows="{{ report['event_views']['rows'] }}"></div>

在模板渲染期间填充数据属性的位置。然后，我使用以下 JavaScript 尝试绘制图表:

google.load('visualization', '1.0', {packages: ['line']});
google.setOnLoadCallback(drawCharts);

function drawPageViews() {
    var data = new google.visualization.DataTable();
    var page_views = document.getElementById("page_views");
    var labels = eval(page_views.dataset.labels);
    data.addColumn('number', "Day");
    for(var i = 0; i < labels.length; i++) {
        data.addColumn('number', labels[i]);
    }

    var rows = eval(page_views.dataset.rows);
    data.addRows(rows);

    var options = {
        chart: {
            title: page_views.dataset.title
        },
        width: 900,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('page_views'));
    chart.draw(data, options);
}

function drawEventViews() {
    var data = new google.visualization.DataTable();
    var event_views = document.getElementById("event_views");
    var labels = eval(event_views.dataset.labels);
    data.addColumn('number', "Day");
    for(var i = 0; i < labels.length; i++) {
        data.addColumn('number', labels[i]);
    }

    var rows = eval(event_views.dataset.rows);
    data.addRows(rows);

    var options = {
        chart: {
            title: event_views.dataset.title
        },
        width: 900,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('event_views'));
    chart.draw(data, options);
}

function drawCharts() {
    drawPageViews();
    drawEventViews();
}

我得到的结果是，其中一个图表被绘制，而另一个图表包含一个带有空标签的 SVG，里面没有其他内容。绘制哪个图表是随机的。注释掉任一绘制函数都会使另一个图表按预期绘制。

似乎必须存在某种共享的全局状态或变量，但在我看来，所有内容都是在不同的绘制函数中定义的。当我查找类似的问题时，人们提供的解决方案看起来非常像我正在做的事情。我错过了什么？

Answer 1

此行为似乎与 draw 函数有关，特别是在页面上呈现多个图表时会发生这种情况。

根据the documentation :

The draw() method is asynchronous: that is, it returns immediately, but the instance that it returns might not be immediately available.

要在页面上渲染多个图表，您可以考虑以下方法:渲染前一个图表后渲染下一个图表，这就是 ready 事件发挥作用的地方。

话虽如此，解决方案是替换:

function drawCharts() {
  drawPageViews();
  drawEventViews();
}

与

function drawCharts() {
    drawPageViews(function(){
       drawEventViews();
    });
}

哪里

function drawPageViews(chartReady) {
    //...
    var chart = new google.charts.Line(document.getElementById('page_views'));
    if (typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
    chart.draw(data, options);
}

和

function drawEventViews(chartReady) {
    //...
    var chart = new google.charts.Line(document.getElementById('event_views'));
    if (typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
    chart.draw(data, options);
}

工作示例

google.load('visualization', '1.0', { packages: ['line'] });
google.setOnLoadCallback(drawCharts);

function drawPageViews(chartReady) {
    var data = new google.visualization.DataTable();
    var page_views = document.getElementById("page_views");
    var labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    data.addColumn('string', 'Day');
    data.addColumn('number', 'PageViews');

   
    var rows = new Array();
    for (var i = 0; i < labels.length; i++) {
        rows.push([labels[i], getRandomInt(0, 100)]);
    }
    data.addRows(rows);


    var options = {
        chart: {
            title: 'Page views'
        },
        width: 900,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('page_views'));
    if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
    chart.draw(data, options);
}

function drawEventViews(chartReady) {
    var data = new google.visualization.DataTable();
    var event_views = document.getElementById("event_views");
   
    var labels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    data.addColumn('string', 'Day');
    data.addColumn('number', 'EventViews');
    var rows = new Array();
    for (var i = 0; i < labels.length; i++) {
        rows.push([labels[i], getRandomInt(0, 100)]);
    }
    data.addRows(rows);

    var options = {
        chart: {
            title: 'Event views'
        },
        width: 900,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('event_views'));
    if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
    chart.draw(data, options);
}

function drawCharts() {
    drawPageViews(function(){
        drawEventViews();
    });
}


function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="page_views"></div>
<div id="event_views"></div>