允许谷歌图表显示超过2个不同的数据集答案

【问题标题】：allow google chart to display more than 2 different data sets允许谷歌图表显示超过2个不同的数据集
【发布时间】：2015-09-03 19:14:14
【问题描述】：

下面的这张图表是由 Google 提供的，它显示了 2 个数据集（茶、咖啡）。我一直在尝试使用以显示 5 个数据集但失败了。我尝试更改 button.onclick 函数和 button.value。我附上了初始代码（2个数据集）和修改后的代码（5个数据集）。

初始视图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <button type="button" id="b1">Click Me!</button> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
  Google Visualization API Sample
  </title>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
  </script>
  <script type="text/javascript">
  // Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                 'Rwanda', 'Average'],
                ['2004/05', 165, 938, 522, 998, 450, 114.6],
                ['2005/06', 135, 1120, 599, 1268, 288, 382],
                ['2006/07', 157, 1167, 587, 807, 397, 623],
                ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                 'Rwanda', 'Average'],
                ['2004/05', 122, 638, 722, 998, 450, 614.6],
                ['2005/06', 100, 1120, 899, 1268, 288, 682],
                ['2006/07', 183, 167, 487, 207, 397, 623],
                ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                ['2008/09', 123, 491, 829, 826, 366, 569.6]];

// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);

var options = {
  width: 400,
  height: 240,
  vAxis: {title: "Cups"},
  hAxis: {title: "Month"},
  seriesType: "bars",
  series: {5: {type: "line"}},
  animation:{
    duration: 1000,
    easing: 'out'
  },
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
  // Disabling the button while the chart is drawing.
  button.disabled = true;
  google.visualization.events.addListener(chart, 'ready',
      function() {
        button.disabled = false;
        button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
      });
  options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

  chart.draw(data[current], options);
}
drawChart();

button.onclick = function() {
  current = 1 - current;
  drawChart();
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

修改后的视图：

<html>
<head>
    <button type="button" id="b1" onclick="init();">Click me!</button>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(init);
        function init() {
            var rowData1 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
                                          ['Accountancy', 165, 938, 522, 998, 450],
                                          ['Economic & Business Sciences', 135, 1120, 599, 1268, 288],
                                          ['Law', 157, 1167, 587, 807, 397],
                                          ['WitsPlus (BCom)', 139, 1110, 615, 968, 215],
                                          ['Graduate School of Business Administration', 136, 691, 629, 1026, 366]];

            var rowData2 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
                      ['Architecture & Planning', 122, 638, 722, 998, 450],
                      ['Chemical and Metallurgical Engineering', 100, 1120, 899, 1268, 288],
                      ['Civil & Environmental Engineering', 183, 167, 487, 207, 397],
                      ['Construction Economics & Management', 200, 510, 315, 1068, 215],
                      ['Electrical & Information Engineering', 139, 1110, 615, 968, 215],
                      ['Mechanical, Industrial & Aeronautical Engineering', 165, 938, 522, 998, 450],
                      ['Mining Engineering', 123, 491, 829, 826, 366]];

            var rowData3 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
                    ['Anatomical Science', 122, 638, 722, 998, 450],
                    ['Clinical Medicine', 320, 1120, 279, 1268, 288],
                    ['Oral Health Sciences', 183, 167, 487, 207, 397],
                    ['Pathology', 200, 560, 315, 679, 215],
                    ['Physiology', 139, 900, 615, 500, 215],
                    ['Public Health', 165, 938, 522, 998, 450],
                    ['Therapeutic Sciences', 183, 500, 487, 207, 397],
                    ['Centre for Health Science Education', 139, 1110, 615, 968, 215],
                    ['Centre for Postgraduate Studies and Research Office', 123, 491, 829, 826, 366]];

            var rowData4 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
                    ['Wits School of Arts', 122, 638, 722, 998, 450],
                    ['Wits School of Education', 320, 1120, 279, 1268, 288],
                    ['Humanities Graduate Centre', 183, 167, 487, 207, 397],
                    ['Human & Community Development', 200, 560, 315, 679, 215],
                    ['Literature, Language and Media', 139, 900, 615, 500, 215],
                    ['Social Sciences', 165, 938, 522, 998, 450],
                    ['WitsPlus (BA for the World of Work)', 123, 491, 829, 826, 366]];

            var rowData5 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
                    ['Biological and Life Sciences', 122, 638, 722, 998, 450],
                    ['Animal, Plant & Environmental Sciences', 320, 1120, 279, 1268, 288],
                    ['Molecular & Cell Biology', 183, 167, 487, 207, 397],
                    ['Chemistry', 200, 560, 315, 679, 215],
                    ['Physics', 139, 900, 615, 500, 215],
                    ['Geography, Archaeology & Environmental Studies', 165, 938, 522, 998, 450],
                    ['Geosciences', 183, 167, 487, 207, 397],
                    ['Computer Science & Applied Mathematics', 200, 560, 315, 679, 215],
                    ['Mathematics', 139, 900, 615, 500, 215],
                    ['Statistics & Actuarial Science', 123, 491, 829, 826, 366]];

            // Create and populate the data tables.
            var data = [];
            data[0] = google.visualization.arrayToDataTable(rowData1);
            data[1] = google.visualization.arrayToDataTable(rowData2);
            data[2] = google.visualization.arrayToDataTable(rowData3);
            data[3] = google.visualization.arrayToDataTable(rowData4);
            data[4] = google.visualization.arrayToDataTable(rowData5);

            var options = {
                width: 600,
                height: 440,
                vAxis: { title: "Submissions" },
                hAxis: { title: "School" },
                seriesType: "bars",
                series: { 4: { type: "line" } },
                animation: {
                    duration: 1000,
                    easing: 'out'
                },
            };
            var current = 0;
            // Create and draw the visualization.
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            var button = document.getElementById('b1');
            function drawChart() {
                // Disabling the button while the chart is drawing.
                button.disabled = true;
                google.visualization.events.addListener(chart, 'ready',
                    function () {
                        button.disabled = false;
                        button.value = 'Switch to ' + (current ? 'Commerce, Law & Management' : 'Engineering & the Built Environment');
                    });
                options['title'] = 'Submissions by the ' + (current ? 'Engineering & the Built Environment' : 'Commerce, Law & Management') + ' Faculty';

                chart.draw(data[current], options);
            }
            drawChart();

            button.onclick = function () {
                current = 1 - current;
                drawChart();
            }
        }
    </script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

修改后的视图只显示 rowData1 和 rowData2。我试图摆弄它来显示rowData1、rowData2、rowData3、rowData4和rowData5。澄清一下，每一行数据代表一所大学的一个学院，每一行内的值代表每个学院的学校。

院系如下： rowData1 - 商业、法律和管理， rowData2 - 工程与建筑环境， rowData3 - 健康科学， rowData4 - 人文学科， rowData5 - 科学。

如您所见，rowData1 和 rowData2 的功能已经实现。

【问题讨论】：

标签： javascript html asp.net asp.net-mvc google-visualization

【解决方案1】：

这：current = 1 - current; 将始终在 1 和 0 之间切换，这就是为什么只会绘制前 2 个表格的原因。

更简单的方法：绘制完图表后，将第一个数据表推到data-array 的末尾，然后你不需要关心计数器，data[0] 总是下一个表绘制。

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

function init() {
  var rowData1 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Accountancy', 165, 938, 522, 998, 450],
    ['Economic & Business Sciences', 135, 1120, 599, 1268, 288],
    ['Law', 157, 1167, 587, 807, 397],
    ['WitsPlus (BCom)', 139, 1110, 615, 968, 215],
    ['Graduate School of Business Administration', 136, 691, 629, 1026, 366]
  ];

  var rowData2 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Architecture & Planning', 122, 638, 722, 998, 450],
    ['Chemical and Metallurgical Engineering', 100, 1120, 899, 1268, 288],
    ['Civil & Environmental Engineering', 183, 167, 487, 207, 397],
    ['Construction Economics & Management', 200, 510, 315, 1068, 215],
    ['Electrical & Information Engineering', 139, 1110, 615, 968, 215],
    ['Mechanical, Industrial & Aeronautical Engineering', 165, 938, 522, 998, 450],
    ['Mining Engineering', 123, 491, 829, 826, 366]
  ];

  var rowData3 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Anatomical Science', 122, 638, 722, 998, 450],
    ['Clinical Medicine', 320, 1120, 279, 1268, 288],
    ['Oral Health Sciences', 183, 167, 487, 207, 397],
    ['Pathology', 200, 560, 315, 679, 215],
    ['Physiology', 139, 900, 615, 500, 215],
    ['Public Health', 165, 938, 522, 998, 450],
    ['Therapeutic Sciences', 183, 500, 487, 207, 397],
    ['Centre for Health Science Education', 139, 1110, 615, 968, 215],
    ['Centre for Postgraduate Studies and Research Office', 123, 491, 829, 826, 366]
  ];

  var rowData4 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Wits School of Arts', 122, 638, 722, 998, 450],
    ['Wits School of Education', 320, 1120, 279, 1268, 288],
    ['Humanities Graduate Centre', 183, 167, 487, 207, 397],
    ['Human & Community Development', 200, 560, 315, 679, 215],
    ['Literature, Language and Media', 139, 900, 615, 500, 215],
    ['Social Sciences', 165, 938, 522, 998, 450],
    ['WitsPlus (BA for the World of Work)', 123, 491, 829, 826, 366]
  ];

  var rowData5 = [
    ['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
    ['Biological and Life Sciences', 122, 638, 722, 998, 450],
    ['Animal, Plant & Environmental Sciences', 320, 1120, 279, 1268, 288],
    ['Molecular & Cell Biology', 183, 167, 487, 207, 397],
    ['Chemistry', 200, 560, 315, 679, 215],
    ['Physics', 139, 900, 615, 500, 215],
    ['Geography, Archaeology & Environmental Studies', 165, 938, 522, 998, 450],
    ['Geosciences', 183, 167, 487, 207, 397],
    ['Computer Science & Applied Mathematics', 200, 560, 315, 679, 215],
    ['Mathematics', 139, 900, 615, 500, 215],
    ['Statistics & Actuarial Science', 123, 491, 829, 826, 366]
  ];

  // Create and populate the data tables.
  //Note: we store the title as table-property
  var data = [];
  data[0] = google.visualization.arrayToDataTable(rowData1);
  data[0].setTableProperty('title', 'Commerce, Law & Management');
  data[1] = google.visualization.arrayToDataTable(rowData2);
  data[1].setTableProperty('title', 'Engineering & the Built Environment');
  data[2] = google.visualization.arrayToDataTable(rowData3);
  data[2].setTableProperty('title', 'Health Sciences');
  data[3] = google.visualization.arrayToDataTable(rowData4);
  data[3].setTableProperty('title', 'Humanities');
  data[4] = google.visualization.arrayToDataTable(rowData5);
  data[4].setTableProperty('title', 'Science');

  var options = {
    width: 600,
    height: 440,
    vAxis: {
      title: "Submissions"
    },
    hAxis: {
      title: "School"
    },
    seriesType: "bars",
    series: {
      4: {
        type: "line"
      }
    },
    animation: {
      duration: 1000,
      easing: 'out'
    },
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  var button = document.getElementById('b1');
  google.visualization.events.addListener(chart, 'ready', function() {
    button.disabled = false;
  });

  function drawChart() {

    options['title'] = 'Submissions by the ' + data[0].getTableProperty('title') 
                           + ' Faculty';
    button.disabled = true;
    chart.draw(data[0], options);
    //push the first table to  the end  
    data.push(data.shift());
    //set value for button
    button.value = 'Switch to ' + data[0].getTableProperty('title');
  }
  drawChart();
  button.onclick = drawChart;
}

#b1{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<input type="button" id="b1" value="Click me!" />
<div id="chart_div"></div>

【讨论】：