3
中的行我試圖用Google Charts API創建儀表板。Google Charts API - 儀表板：隱藏表
儀表板包含一個帶有ChartRangeFilter類型和兩個ChartWrapper（LineChart和Table）的ControlWrapper。此設置工作正常，但我想添加一個添加。
LineChart應顯示整個數據集，表只是其中的一部分。 例如，我有10行，在表中只顯示前8個。
這是我目前ControlWrapper：
control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '95%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0,1]
},
'minRangeSize': 86400000
}
}
});
而這個表：
chart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options': {
width: 470,
height: 340,
sortColumn: 0,
sortAscending: false
},
'view': {
'columns': [0, 1]
//,'rows': [0,1,2,3,4,5,6]
}
});
當我取消註釋行「// '行'：0,1,2,3 ，4,5,6]」在表定義中我得到一個錯誤，當我移動ControlWrapper的滑塊：
Invalid row index 6. Should be in the range [0-5]
有沒有辦法得到這個工作？
原因是（在本例中）最後兩行中只有第3列中的數據，該數據只顯示在LineChart中，但不在表格中。
在此先感謝！
//編輯：
下面是一個例子頁： http://circlecount.com/test.chart.range.php
下面是代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml-rdfa-2.xsd" lang="de" xml:lang="de" dir="ltr" xmlns:og="http://ogp.me/ns#" >
<head>
<script src="http://www.google.com/jsapi?key=" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>
</head>
<body>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart', 'table', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(fctDrawChart);
var control, chart;
function fctDrawChart() {
//follower
var data = new google.visualization.DataTable();
var myTempDate = new Date();
data.addColumn('date', 'Day');
data.addColumn('number', 'Followers');
data.addRows(10);
data.setCell(0, 0, new Date('11/07/2011'));
data.setCell(0, 1, 11);
data.setCell(1, 0, new Date('11/08/2011'));
data.setCell(1, 1, 222);
data.setCell(2, 0, new Date('11/09/2011'));
data.setCell(2, 1, 1242);
data.setCell(3, 0, new Date('11/10/2011'));
data.setCell(3, 1, 1420);
data.setCell(4, 0, new Date('11/11/2011'));
data.setCell(4, 1, 1609);
data.setCell(5, 0, new Date('11/12/2011'));
data.setCell(5, 1, 1676);
data.setCell(6, 0, new Date('11/13/2011'));
data.setCell(6, 1, 1734);
data.setCell(7, 0, new Date('11/14/2011'));
data.setCell(7, 1, 1773);
data.setCell(8, 0, new Date('11/15/2011'));
data.setCell(8, 1, 1857);
data.setCell(9, 0, new Date('11/16/2011'));
data.setCell(9, 1, 1874);
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, 1]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '95%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0,1]
},
'minRangeSize': 86400000
}
}
});
google.visualization.events.addListener(control, 'statechange', function() {
$("#periodSelector").val("custom");
});
chart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
'options': {
width: 470,
height: 340,
sortColumn: 0,
sortAscending: false
},
'view': {
'columns': [0, 1]
,'rows': [0,1,2,3,4,5,6]
}
});
chart2 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
width: 470,
height: 340,
sortColumn: 0,
sortAscending: false
},
'view': {
'columns': [0, 1]
}
});
dashboard.bind(control, chart);
dashboard.bind(control, chart2);
dashboard.draw(data);
}
</script>
<div id='dashboard' >
<div id='table' style='width:240px;height:400px;'></div>
<div id='chart' style='width:240px;height:400px;'></div>
<div id='control' style='width:840px;height:40px;'></div>
</div>
</div>
</body>
</html>
我想什麼： - 在整個週期圖表（10天） - 僅在前7天的表格 - 完整時期（10天）的ControlWrapper，控制圖表和表格
我希望能讓我的問題更清楚。如果沒有，請給我一張紙條。
在此先感謝！
更新： 隨着JMAC的想法我得到了它與下面的函數工作：
google.visualization.events.addListener(control, 'statechange',
function(event) {
if (control.getState()["range"]["end"] > myLastRealDate) {
var myRowsArr = new Array();
var myTempDate = control.getState()["range"]["start"];
for (var i=0;i<myLastRealRow-(myDateArr[(myTempDate.getMonth()+1)+"/"+myTempDate.getDate()+"/"+myTempDate.getFullYear()]);i++) {
myRowsArr.push(i);
}
chart.setView({'rows': myRowsArr});
}
else {
chart.setView({'rows': null});
}
});
您可以在這裏找到工作的例子：http://circlecount.com/test.chart.range.php
請問你能解釋一下問題是什麼，並在文章中包含完整的代碼？它看起來像只有6行數據，但試圖顯示7 - 這與顯示錶格的部分數據與線圖無關。如果你可以更好地解釋這個問題，它會使幫助變得更容易。 – jmac 2013-05-13 00:27:33
感謝您的反饋jmac！ （因爲這裏沒有換行可能我已經更新了我最初的帖子） 下面是一個例子頁： http://circlecount.com/test.chart.range.php 我想什麼： - 一個完整時間段（10天）的圖表 - 僅在前7天內的表格 - 完整時間段（10天）內的ControlWrapper，控制圖表和表格 我希望這能讓我的問題更清楚。如果沒有，請給我一張紙條。 在此先感謝！ – Chris 2013-05-13 17:29:32