Javascript 如何使用GoogleCharts API绘制两个材质图，而其中一个不为空？

我正在尝试使用GoogleCharts 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();
}

google.load（'visualization'，'1.0'，{packages:['line']}）；
setOnLoadCallback（绘图图）；
函数drawPageViews（）{
var data=new google.visualization.DataTable（）；
var page_views=document.getElementById（“page_views”）；
var labels=eval（page_views.dataset.labels）；
data.addColumn（“数字”、“日期”）；
对于（变量i=0；i

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

---

似乎必须存在某种共享的全局状态或变量，但在我看来，一切都是在不同的绘图函数中定义的。当我查找类似的问题时，人们会提供与我所做的非常相似的解决方案。我缺少什么？

这种行为似乎与

draw

函数有关，尤其是在页面上呈现多个图表时

根据：

draw（）方法是异步的：即它立即返回， 但它返回的实例可能不会立即可用

在页面上绘制多个图表时，可以考虑以下方法：在呈现前一个图表时呈现下一个图表，这就是<>代码>就绪> /代码>事件来拯救。

已经说过，解决办法将是取代：

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

与

在哪里

及

工作示例

google.load（'visualization'，'1.0'，{packages:['line']}）；
setOnLoadCallback（绘图图）；
函数drawPageViews（chartReady）{
var data=new google.visualization.DataTable（）；
var page_views=document.getElementById（“page_views”）；
var标签=[‘星期日’、‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’、‘星期六’]；
data.addColumn（'string'，'Day'）；
data.addColumn（'number'，'PageViews'）；
var rows=新数组（）；
对于（变量i=0；i

有一个多材质图表的错误，请参阅我的答案谢谢，这为我节省了很多时间！有趣的是，这个问题只发生在材质图表上，其他的一切似乎都很好，没有像这样链接它们。也节省了我很多时间！非常感谢。

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