javascript-如何将多个重要的Google图表添加到一页？

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时,我没有这个问题.

有任何想法吗？

解决方法:

在google-visualization-issues存储库中最有可能报告了the same issue：

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.同步渲染图表

总体思路是同步绘制图表.由于绘图功能是异步的,因此我们为此目的使用了就绪事件处理程序.

更换：

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\”\u0026gt;\u0026lt;/script\u0026gt;

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>

标签：javascript,asynchronous,data-visualization,google-visualization
来源： https://codeday.me/bug/20191012/1897608.html