Google visualization Google图表使用列图表中数据表中的三列_Google Visualization

Google visualization Google图表使用列图表中数据表中的三列

google-visualization

Google visualization Google图表使用列图表中数据表中的三列,google-visualization,Google Visualization,嗨，我是谷歌图表的新手，这里我有一个柱状图和一个表格。我现在得到的是下面的东西但我希望柱状图显示如下内容：这是我的密码：  <!DOCTYPE html PUBLIC "-

嗨，我是谷歌图表的新手，这里我有一个柱状图和一个表格。我现在得到的是下面的东西

但我希望柱状图显示如下内容：

这是我的密码：

<!--
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>


load（'visualization'，'1.1'，{packages:['controls']}）；
函数drawVisualization（）{
var data=google.visualization.arrayToDataTable([
[“期间”、“类型”、“名称”、“单位库存”、“订单数量”、“总销售额”]，
[“2014年1月7日12:00:00 AM”，“第一类”，“iPod Touch 12Gb”，2,2,0]，
[“2014年7月2日12:00:00 AM”，“第一类”，“iPod Touch 12Gb”，11800]，
[“2014年2月7日12:00:00 AM”，“第一类”，“iPod Nano 12Gb”，1000100700]，
[“2014年3月7日12:00:00 AM”，“第一类”，“iPodtouch 12Gb”，81360]
]);
var categoryPicker=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“集装箱ID”：“控制”，
“选项”：{
'filterColumnLabel'：'Period'，
“用户界面”：{
“allowTyping”：false，
“allowMultiple”：false，
'selectedValuesLayout'：'belowStacked'，
“AllowOne”：错误
}
}      
});
var columnChart=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱运输”：“图表”，
'视图'：{'列'：[2,5]}，
'options'：{'width'：'800'}
});
var table=new google.visualization.ChartWrapper({
“图表类型”：“表格”，
“containerId”：“表”，
'options'：{'width'：'800'
}
});
新的google.visualization.Dashboard（document.getElementById（'Dashboard'））。
绑定（[categoryPicker]，[columnChart，table]）。
绘制（数据）；
}
setOnLoadCallback（drawVisualization）；
`

试试这个

<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>


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“名称”、“总销售额”]，
[“iPod Touch 12Gb”，0]，
[“iPod Touch 12Gb”，800]，
[“iPod Nano 12Gb”，700]，
[“iPod Touch 12Gb”，360]
]);
变量选项={
标题：“公司业绩”，
hAxis:{title:'Type'，titleTextStyle:{color:'red'}
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

在需要数据表数据透视的图表中使用此选项。图表根据列而不是行条目创建数据系列，因此您必须旋转数据表，以便每个值（

iPod Touch 12Gb

，

iPod Nano 12Gb

，等等）都有自己的数据列。请参见此示例：。感谢您的回复。我在数据表中还有一列是period。所以我想显示名称、总销售额、年和月。请查看此图表：