嗨,我是谷歌排行榜的新手,这里有一张柱形图和一张表。我现在得到的是下面的内容 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>
答案 0 :(得分:0)
试试这个
<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>