javascript - 如何将多个 Material 谷歌图表添加到一个页面？

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这是在 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) 添加对加载程序的引用:<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>