Javascript Google图表，同时使用多个条形图和相关控件
我正在尝试使用谷歌图表和相关控件制作条形图。我遇到的问题涉及以可用于我的任务的格式输入数据 以下是我想使用的数据示例： “选项1标题”、“选项2标题”、“选项3标题”、“val1”、“val2”、“val3”、“val4”、“val5”、“val6” ‘Row1val1’、‘Row1val2’、‘Row1val3’、13360601538156、1576579、16006521968113123345 ‘Row2val1’、‘Row2val2’、‘Row2val3’、400361、366849、440514、434552、393032、234374 ‘Row3val1’、‘Row3val2’、‘Row3val3’、1001582、11194509933601004163979198578236 ‘Row4val1’、‘Row4val2’、‘Row4val3’、997974、941795、930593、897127、108087、4893 本例中的第一行包含我要在“Option1heading”、“Option2heading”和“Option3heading”上筛选的选项。实际上，这些可能类似于“国家”、“地区”、“州”。然后，第二行包含作为筛选信息的数据“Row1val1”、“Row1val2”、“Row1val3”（例如“France”、“North”、“Paris”） 接下来，6个数值将是该行的单个数据条。在本例的图例中，这些值应等于“val1”-“val6”（根据第一行）。实际上，这些可能是“人口”、“男性”、“女性”、“0-10岁”等 以下是目前的代码。它“有点”工作，但工作不正常。这可能吗？有人能给我指出正确的方向吗Javascript Google图表，同时使用多个条形图和相关控件,javascript,json,visualization,google-visualization,Javascript,Json,Visualization,Google Visualization,我正在尝试使用谷歌图表和相关控件制作条形图。我遇到的问题涉及以可用于我的任务的格式输入数据 以下是我想使用的数据示例： “选项1标题”、“选项2标题”、“选项3标题”、“val1”、“val2”、“val3”、“val4”、“val5”、“val6” ‘Row1val1’、‘Row1val2’、‘Row1val3’、13360601538156、1576579、16006521968113123345 ‘Row2val1’、‘Row2val2’、‘Row2val3’、400361、366849、
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.dump.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.1', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
var data = new google.visualization.DataTable();
var raw_data = [['Option1', 'Option2', 'option3', 'val 1', 'val 2', 'val 3', 'val 4', 'val 5', 'val 6'],
['Ford', 's', 'm', 1336060, 1538156, 1576579, 1600652, 1968113, 123345],
['Citroen', 's', 'm', 400361, 366849, 440514, 434552, 393032, 234374],
['BMW', 's', 'm', 1001582, 1119450, 993360, 1004163, 979198, 578236],
['Toyota', 's', 'm', 997974, 941795, 930593, 897127, 108087, 4893]];
var my_rows = ['Row1', 'Row2', 'Row3', 'Row4', 'Row5', 'Row6'];
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(my_rows.length);
for (var j = 0; j < my_rows.length; ++j) {
data.setValue(j, 0, my_rows[j].toString());
}
for (var i = 1; i < raw_data.length; ++i) {
for (var j = 3; j < raw_data[i].length; ++j) {
data.setValue(j-3, i+1, raw_data[i][j]);
}
}
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var controlPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Ford',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var controlPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Citroen',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var controlPicker3 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'BMW',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart_div',
'options': {
'width': '100%',
'height': '100%',
'vAxis': {title: "Year"},
'hAxis': {title: "Cups"},
'fontSize': 14,
'chartArea': {top: 0, right: 0, bottom: 0, height:'100%', width:'70%'}
},
// Configure the barchart to use columns 2 (City) and 3 (Population)
});
google.visualization.events.addListener(dashboard, 'ready', function() {
// Dashboard redraw, have a look at how many rows the barChart is displaying
var numRows = barChart.getDataTable().getNumberOfRows();
var expectedHeight = (numRows * 60)+50;
if (parseInt(barChart.getOption('height'), 10) != expectedHeight) {
// Update the chart options and redraw just it
Div("chart_div", expectedHeight);
barChart.setOption('height', expectedHeight);
barChart.draw();
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(controlPicker1, controlPicker2);
dashboard.bind(controlPicker2, controlPicker3);
dashboard.bind(controlPicker3, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
function Div(id,h) {
var div=document.getElementById(id);
h = (h) + "px";
var w=parseInt(div.style.width);
if($(this).width() >= 1200){
w = 1200 + "px";
}else{
w = ($(this).width()-30) + "px";
}
$(div).height(h);
$(div).width(w);
}
</script>
</head>
<style>
#chart_div { width: 1200px; height: 30000px; }
</style>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and visualization-->
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
//加载可视化API和控件包。
load（'visualization'，'1.1'，{'packages'：['corechart'，'controls']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawDashboard）；
//创建并填充数据表的回调，
//实例化仪表板、范围滑块和饼图，
//传入数据并绘制它。
函数drawDashboard（）{
var data=new google.visualization.DataTable（）；
var raw_data=[['选项1'、'选项2'、'选项3'、'值1'、'值2'、'值3'、'值4'、'值5'、'值6']，
[Ford'，s'，m'，133600601538156，1576579，16006521968113123345]，
[Citroen'，s'，m'，400361，366849，440514，434552，393032，234374]，
[BMW'，s'，m'，1001582，11194509933601004163979198578236]，
[‘丰田’、‘s’、‘m’、997974、941795、930593、897127、108087、4893]；
变量my_rows=['Row1'、'Row2'、'Row3'、'Row4'、'Row5'、'Row6']；
data.addColumn（'string'，'Year'）；
对于（变量i=0；i{
"cols": [ {"id":"Col1", "label":"", "type":"date"} ],
"rows":
[
{ "c": [ {"v":"a"}, {"v":"Date(2010,10,6)"} ] },
{ "c": [ {"v":"b"}, {"v":"Date(2010,10,7)"} ] }
]
}