Question

我一直在努力解决这个问题一段时间了，似乎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在第一个图表之前渲染是它的工作原理。我只是不知道我需要做什么才能允许三个或更多图表。有没有办法强制任意数量的图表先渲染一个？

Answer 1

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

Answer 2

我认为你的当前版本存在问题，这有问题在加载另一个图表之前，您不需要等待一个图表加载。

以下是加载版本41 - ＆gt;的示例所有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>

Answer 3

以下示例显示如何在一个页面上呈现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>

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

3 个答案: