如何将多个 material google 图表添加到一页？

Question

This question has been asked before，但关于旧的 corechart API，我没有遇到问题，而不是新的 Material 图表。例如，以下代码将按预期创建两个图表：

var data = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
];

google.load('visualization', '1', {
    'packages': ['corechart']
});

google.setOnLoadCallback(drawChart);

function drawChart() {

    new google.visualization.ColumnChart(document.getElementById('groupedBar')).draw(
        new google.visualization.arrayToDataTable(data), {});

    new google.visualization.ColumnChart(document.getElementById('stackedBar')).draw(
        new google.visualization.arrayToDataTable(data), {isStacked:true});
}

http://jsfiddle.net/crclayton/r67ega11/10/

不过，更新后的版本：

google.load('visualization', '1.1', {      // note version 1.1 and bar package 
    'packages': ['bar']                     
});

google.setOnLoadCallback(drawChart);

function drawChart() {

    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));

    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

http://jsfiddle.net/crclayton/r67ega11/6/

... 只会呈现其中一个图表，有时是第一个，有时是第二个。它不会抛出错误，它只会忽略另一个。我试过将它们分解成单独的函数，将所有内容分配给变量，重置 google.setOnLoadCallback 得到相同的结果。

我还发现在渲染 different types of charts 时没有这个问题。

有什么想法吗？

Answer 1

最有可能 the same issue that was reported in google-visualization-issues 存储库：

The problems people have seen with the sizing of multiple instances of material charts should be resolved with this new release. You can change your code to load "1.1" now so that when the candidate release becomes available, you will be using it.

目前至少有两种解决方案：

选项 1. 同步渲染图表

大意是同步渲染图表。由于绘制函数是异步的，我们为此目的使用 ready 事件处理程序。

替换：

function drawChart_() {
    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));



    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

与：

function drawChart() {

    var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
    google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
       var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
       stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
    });
    groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}

例子

var data = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
];


google.load('visualization', '1.1', {
    'packages': ['bar']
});

google.setOnLoadCallback(drawChart);




function drawChart() {

    var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar'));
    google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){
       var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar'));
       stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true}));
    });
    groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({}));
}

function drawChart_() {
    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));



    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="chart.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>

方案2.使用冻结版本加载器。

自

The rollout of the v43 candidate release that would fix this problem

切换到使用冻结版本加载器。

步骤：

1)添加对loader的引用：<script src="//www.gstatic.com/charts/loader.js"></script>

2)然后加载一个43版本的库：google.charts.load("43",{packages:["bar"]});

3)替换：

google.setOnLoadCallback(drawChart);

和

google.charts.setOnLoadCallback(drawChart);

例子

var data = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
];


google.charts.load("43",{packages:["bar","corechart"]});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({}));



    new google.charts.Bar(document.getElementById('stackedBar')).draw(
    new google.visualization.arrayToDataTable(data),
    google.charts.Bar.convertOptions({
        isStacked: true
    }));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>

如何将多个 material google 图表添加到一页？

How to add multiple material google charts to one page?

javascript

asynchronous

data-visualization

google-visualization