我如何用谷歌图表API绘制两个材质图，而没有一个是空的

How can I draw two material charts with the Google Charts API without one being empty?

本文关键字：有一个 两个 谷歌 何用 API 绘制      更新时间：2023-09-26

我试图使用谷歌图表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，其中有一个空标记，没有其他内容。画哪张图是随机的。注释掉其中一个绘制函数会使其他单个图表按预期绘制。

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

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

根据文档:

draw()方法是异步的:也就是说，它立即返回，但是它返回的实例可能不是立即可用的。

对于在页面上呈现多个图表，您可以考虑以下方法:在呈现前一个图表后呈现下一个图表，这是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>

相关文章：