一个页面上有两个以上的 Google 图表？答案

【问题标题】：More than two Google Charts on a single page?一个页面上有两个以上的 Google 图表？
【发布时间】：2016-01-11 18:00:51
【问题描述】：

我已经为这个问题苦苦挣扎了一段时间，而且似乎 google 多年来对 Google Charts API 进行了很多细微的更改，这使得找到答案变得更加困难我的图表不工作。

我只是想在一个页面上显示两个以上相同的图表类型（条形图）。就在今天，我找到了一个允许我一次显示 2 个图表的解决方案（链接：“Google Charts stops drawing after first chart”），但这只是一个小胜利，因为我确实需要显示 2 个以上的图表，而这个解决方案只是强制一个图表在另一个之前呈现。

这是我当前的代码：

Javascript

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

google.setOnLoadCallback(drawStuff);

      function drawStuff() {
          
        // Courses_Played Data  
        var data = new google.visualization.arrayToDataTable([
          ['', 'Number of Rounds Played'],
          ["Ken McDonald", 10],
          ["ASU Karsten", 8],
          ["TPC Scotts...", 7],
          ["Ahwatukee", 3],
          ['Other', 3]
        ]);
          
        // Courses_played Options
        var options = {
          title: '',
          width: 440,
          height: 215,
          legend: { position: 'none' },
          axes: {x: {0: { side: 'bottom' }}},
          bar: { groupWidth: "70%" },
          colors: ['darkgreen'],
        };
          
          
        // Course_Scores Data
        var data2 = new google.visualization.arrayToDataTable([
          ['', 'Number of Rounds Played'],
          ["TPC Scotts...", 81],
          ["ASU Karst...", 83],
          ["Ken McDonald", 87],
          ["Ahwatukee", 90],
        ]);  
          
        //Course_Scores Options
          var options2 = {
          title: '',
          width: 440,
          height: 215,
          legend: { position: 'none' },
          axes: {x: {0: { side: 'bottom' }}},
          vAxis:{ viewWindow:{ min:60 }},
          bar: { groupWidth: "70%" },
          colors: ['darkgreen'],
        };
          
          
        var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
google.visualization.events.addOneTimeListener(chart, 'ready', function(){

        var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
        // Convert the Classic options to Material options.
        chart2.draw(data2, google.charts.Bar.convertOptions(options2));
          });
          
      chart.draw(data, google.charts.Bar.convertOptions(options));    
      };

同样，这段代码目前有效，但这只是因为我使用了一个仅适用于两个图表的解决方案。问题似乎出在最后几行代码中，因为强制chart2 在第一个图表之前呈现是它工作的原因。我只是不知道我需要做什么来允许三个或更多图表。有没有办法强制任意数量的图表在另一个之前呈现？

【问题讨论】：

同一类型的多个材质图表存在错误，this answer可能帮助。材料图表是新的，仍处于测试阶段，我上次检查过。在 corechart 包之外加载的任何图表都被视为 material 图表，例如line 和 bar...
我不太明白你的问题。我确实理解在绘制另一个图表之前等待一个图表准备好是一个糟糕的举动，但是在没有与其他图表交互的情况下添加任意数量的图表有什么问题？将多个图表添加到同一页面时没有任何错误。

标签： javascript google-visualization

【解决方案1】：

以下示例展示了如何在单个页面上呈现3 Google 图表（google.charts.Bar 类型）：

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

google.setOnLoadCallback(drawCharts);

function drawCharts() {

    var chartsData = [
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["Ken McDonald", 10],
                ["ASU Karsten", 8],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 3],
                ['Other', 3]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played'
        },
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["TPC Scotts...", 81],
                ["ASU Karst...", 83],
                ["Ken McDonald", 87],
                ["Ahwatukee", 90],
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                vAxis: { viewWindow: { min: 60 } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Course_Scores'
        },
        {
            'data': [
                ['', 'Number of Rounds Played in 2014'],
                ["Ken McDonald", 5],
                ["ASU Karsten", 4],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 4],
                ['Other', 6]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played2014'
        },
    ];

 
    drawBarCharts(chartsData);

};



function drawBarCharts(chartsData,index) {
    var curIndex = index || 0;
    var chartData = chartsData[curIndex];
    var dataTable = new google.visualization.arrayToDataTable(chartData.data);
    var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId));
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        if (curIndex < chartsData.length - 1)
            drawBarCharts(chartsData, curIndex + 1);
    });
    chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>

或使用这种方式在页面上动态插入图表

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

google.setOnLoadCallback(drawCharts);

function drawCharts() {

    var chartsData = [
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["Ken McDonald", 10],
                ["ASU Karsten", 8],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 3],
                ['Other', 3]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played'
        },
        {
            'data': [
                ['', 'Number of Rounds Played'],
                ["TPC Scotts...", 81],
                ["ASU Karst...", 83],
                ["Ken McDonald", 87],
                ["Ahwatukee", 90],
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                vAxis: { viewWindow: { min: 60 } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Course_Scores'
        },
        {
            'data': [
                ['', 'Number of Rounds Played in 2014'],
                ["Ken McDonald", 5],
                ["ASU Karsten", 4],
                ["TPC Scotts...", 7],
                ["Ahwatukee", 4],
                ['Other', 6]
            ],
            'options': {
                title: '',
                width: 440,
                height: 215,
                legend: { position: 'none' },
                axes: { x: { 0: { side: 'bottom' } } },
                bar: { groupWidth: "70%" },
                colors: ['darkgreen'],
            },
            'chartDivId' : 'Courses_Played2014'
        },
    ];

 
    drawBarCharts(chartsData);

};



function drawBarCharts(chartsData,index) {
    var curIndex = index || 0;
    var chartData = chartsData[curIndex];
    var dataTable = new google.visualization.arrayToDataTable(chartData.data);
    var chartDiv = document.createElement('div');
    chartDiv.id = chartData.chartDivId;
    document.getElementById('chartContainer').appendChild(chartDiv);
    var chart = new google.charts.Bar(document.getElementById(chartDiv.id));
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        if (curIndex < chartsData.length - 1)
            drawBarCharts(chartsData, curIndex + 1);
    });
    chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options));
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chartContainer"></div>

【讨论】：

当我运行第一个 sn-p（在 IE 11 中）时，我只得到 1 个图表并且这个错误 --> 对象不支持属性或方法“包含”

【解决方案2】：

我认为您的当前版本存在问题，该版本存在问题。
您无需等待一张图表加载完毕再加载另一张图表。

这是一个加载版本 41 的示例 --> 绘制所有 3 个图表，无需等待另一个。

google.charts.load('41', {packages: ['bar']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
    // Courses_Played Data
    var data = new google.visualization.arrayToDataTable([
        ['', 'Number of Rounds Played'],
        ["Ken McDonald", 10],
        ["ASU Karsten", 8],
        ["TPC Scotts...", 7],
        ["Ahwatukee", 3],
        ['Other', 3]
    ]);

    // Courses_played Options
    var options = {
        title: '',
        width: 440,
        height: 215,
        legend: { position: 'none' },
        axes: {x: {0: { side: 'bottom' }}},
        bar: { groupWidth: "70%" },
        colors: ['darkgreen'],
    };

    // Courses_Played2014 Data
    var data3 = new google.visualization.arrayToDataTable([
        ['', 'Number of Rounds Played'],
        ["Ken McDonald", 14],
        ["ASU Karsten", 12],
        ["TPC Scotts...", 11],
        ["Ahwatukee", 7],
        ['Other', 7]
    ]);

    // Courses_played2014 Options
    var options3 = {
        title: '',
        width: 440,
        height: 215,
        legend: { position: 'none' },
        axes: {x: {0: { side: 'bottom' }}},
        bar: { groupWidth: "70%" },
        colors: ['darkgreen'],
    };


    // Course_Scores Data
    var data2 = new google.visualization.arrayToDataTable([
        ['', 'Number of Rounds Played'],
        ["TPC Scotts...", 81],
        ["ASU Karst...", 83],
        ["Ken McDonald", 87],
        ["Ahwatukee", 90],
    ]);

    //Course_Scores Options
    var options2 = {
        title: '',
        width: 440,
        height: 215,
        legend: { position: 'none' },
        axes: {x: {0: { side: 'bottom' }}},
        vAxis:{ viewWindow:{ min:60 }},
        bar: { groupWidth: "70%" },
        colors: ['darkgreen'],
    };

    var chart = new google.charts.Bar(document.getElementById('Courses_Played'));
    var chart2 = new google.charts.Bar(document.getElementById('Course_Scores'));
    var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
    chart2.draw(data2, google.charts.Bar.convertOptions(options2));
    chart3.draw(data3, google.charts.Bar.convertOptions(options3));
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>

<div id="Courses_Played"></div>
<div id="Courses_Played2014"></div>
<div id="Course_Scores"></div>

【讨论】：

【解决方案3】：

Google Charts 中的问题是您只能调用 google.charts.load() 一次。所以你需要在这个单一的函数调用中包含所有的包，并从网页的头部调用它。

您可以像这样包含多个包：

<head><script type="text/javascript">
google.charts.load("current", {packages:["corechart","bar"]});
</script>
</head>

这解决了我的问题，让我可以在一个页面上显示多个图表而无需更改任何代码。

要验证检查： https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading

【讨论】：