Question

嗨，我是谷歌排行榜的新手，这里有一张柱形图和一张表。我现在得到的是下面的内容 Here is the image

但我希望柱形图显示如下： Here is the image

这是我的代码：

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!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>
    <!--Load the AJAX API-->
<script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">

  function drawVisualization(){

    var data = google.visualization.arrayToDataTable([
["Period","Type","Name","Unitssold","OrderCount","TotalSales"],
["7/1/2014 12:00:00 AM","Category One","iPod Touch 12Gb",2,2,0],
["7/2/2014 12:00:00 AM","Category One","iPod Touch 12Gb",1,1,800],
["7/2/2014 12:00:00 AM","Category One","iPod Nano 12Gb",1000,100,700],
["7/3/2014 12:00:00 AM","Category One","iPod Touch 12Gb",8,1,360]
]);

    var categoryPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'control',
      'options': {
        'filterColumnLabel':'Period',
        'ui': {
        'allowTyping': false,
        'allowMultiple': false,
        'selectedValuesLayout': 'belowStacked',
          'allowNone': false
        }
      }      
    });

    var columnChart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart',
      'view': {'columns':[2,5]},
      'options':{'width':'800'}
    });

    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table',
      'options':{'width':'800'
      }
    });

    new google.visualization.Dashboard(document.getElementById('dashboard')).
    bind([categoryPicker], [columnChart, table]).
    draw(data);

  }

 google.setOnLoadCallback(drawVisualization);

  </script>
  </head>
 <body>
  <div id="dashboard">
      <table>
        <tr>
          <td align="center">
            <div id="control"></div>
          </td>
        </tr>
        <tr>
          <td align="center">
            <div id="chart"></div>
            <div id="table"></div>
          </td>`
        </tr>
      </table>
    </div>
 </body></html>

Answer 1

试试这个

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
["Name","TotalSales"],
["iPod Touch 12Gb",0],
["iPod Touch 12Gb",800],
["iPod Nano 12Gb",700],
["iPod Touch 12Gb",360]
]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Type', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Google图表使用柱形图中数据表中的三列

1 个答案: