任何人都可以建议我使用Google聊天信息中心实现向下钻取功能的代码。
说如果我点击年份，它应该深入到下一个级别，比如月份，然后是几周，然后是几天。
其称为向下钻取功能。 这是用于图表的代码...我想知道如何在仪表板中使用 - 使用类别过滤器。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart () {
var data = google.visualization.arrayToDataTable([
['Category', 'Name', 'Value'],
['Foo', 'Fiz', 5],
['Foo', 'Buz', 2],
['Bar', 'Qud', 7],
['Bar', 'Piz', 4],
['Cad', 'Baz', 6],
['Cad', 'Nar', 8]
]);
var aggregateData = google.visualization.data.group(data, [0], [{
type: 'number',
label: 'Value',
column: 2,
aggregation: google.visualization.data.sum
}]);
var topLevel = true;
var chart = new google.visualization.ColumnChart(document.querySelector('#chart'));
var options = {
height: 400,
width: 600
};
function draw (category) {
if (topLevel) {
// rename the title
options.title = 'Top Level data';
// draw the chart using the aggregate data
chart.draw(aggregateData, options);
}
else {
var view = new google.visualization.DataView(data);
// use columns "Name" and "Value"
view.setColumns([1, 2]);
// filter the data based on the category
view.setRows(data.getFilteredRows([{column: 0, value: category}]));
// rename the title
options.title = 'Category: ' + category;
// draw the chart using the view
chart.draw(view, options);
}
}
google.visualization.events.addListener(chart, 'select', function () {
if (topLevel) {
var selection = chart.getSelection();
// drill down if the selection isn't empty
if (selection.length) {
var category = aggregateData.getValue(selection[0].row, 0);
topLevel = false;
draw(category);
}
}
else {
// go back to the top
topLevel = true;
draw();
}
});
draw();
}
//google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});
//google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart"></div>
</body>
</html>
此致 Prajna
答案 0 :(得分：1)
以下是我的仪表板示例。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['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() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
["Month","Order Count","Total Cancelled","Total Sales"],["August 2014",4,0,120],["July 2014",3,0,30]
]);
var data2 = google.visualization.arrayToDataTable([
["Month","Day","Order Count","Total Cancelled","Total Sales"],["July 2014","2014-07-10",1,0,0],["July 2014","2014-07-21",2,0,0],["August 2014","2014-08-01",4,0,120]
]);
var formatter = new google.visualization.NumberFormat({pattern:'###,###.00',prefix:'$'});
formatter.format(data,3);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var categoryFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Month',
'ui':{label:''}
}
});
// Create a pie chart, passing some options
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'view': {'columns':[0,3,1]},
'options':{'height':'400','legend':'none',hAxis: {title: '', textStyle: {color: 'none'},viewWindow:{max:12}},
vAxis:{title:'',textStyle:{fontName: 'Lato Light',italic:false},format:'$###,###.00'},
colors:['#64b964','#eba034'],
chartArea:{left:80,top:80,width:"100%",height:"70%"},
'animation':{duration: 1000,easing: 'out'},
bar: {groupWidth: '85%'}
}
});
var cssClassNames = {
'headerRow': 'italic-darkblue-font large-font bold-font',
'tableRow': 'no-border',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
'headerCell': 'no-border',
'tableCell': 'no-border',
'rowNumberCell': 'no-border'
};
var table = new google.visualization.ChartWrapper({
'chartType':'Table',
'containerId':'table_div',
'options':{'page':'enable','pageSize':50,'allowHtml': true,'cssClassNames': cssClassNames}
})
var status = 0;
function columnselectHandler() {
var selectedItem = columnChart.getChart().getSelection()[0];
if (selectedItem) {
if (status == 0){
var name = data.getValue(selectedItem.row, 0);
//categoryFilter1.setState({'selectedValues':[name]});
//dashboard1.bind(categoryFilter1, [columnChart1]);
//dashboard1.draw(data2);
columnChart.setView({'columns':[1,4,2]});
table.setView({'columns':[1,2,3,4]});
categoryFilter.setState({'selectedValues':[name]});
columnChart.setOption('hAxis.viewWindow.max',31);
dashboard.bind(categoryFilter, [columnChart],table);
dashboard.draw(data2);
status = status+1
//document.getElementById("dashboard_div").style.display = "none";
//document.getElementById("dashboard_div1").style.display = "block";
}
}
}
function tableselectHandler() {
var selectedItem = table.getChart().getSelection()[0];
if (selectedItem) {
if (status == 0){
var name = data.getValue(selectedItem.row, 0);
columnChart.setView({'columns':[1,4,2]});
table.setView({'columns':[1,2,3,4]});
categoryFilter.setState({'selectedValues':[name]});
columnChart.setOption('hAxis.viewWindow.max',31);
dashboard.bind(categoryFilter, [columnChart],table);
dashboard.draw(data2);
status = status+1
}
}
}
function categoryHandler(){
var selectedMonth = categoryFilter.getState()['selectedValues'];
if(selectedMonth.length == 0){
columnChart.setView({'columns':[0,3,1]});
table.setView({'columns':[0,1,2,3]});
columnChart.setOption('hAxis.viewWindow.max',12);
dashboard.bind(categoryFilter, [columnChart,table]);
dashboard.draw(data);
status = status-1
}
}
google.visualization.events.addListener(columnChart, 'select', columnselectHandler);
google.visualization.events.addListener(categoryFilter, 'statechange', categoryHandler);
google.visualization.events.addListener(table, 'select', tableselectHandler);
// 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(categoryFilter, [columnChart,table]);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
<style>
.charts-combobox
{
display:none;
}
.charts-inline-block
{
display:none;
}
.label-input-label
{
display:none;
}
.charts-combobox-button
{
display:none;
}
.no-border {
border: 0px solid white;
border-bottom: 1px solid #BDBDBD;
align-self: left;
padding: 10px 10px 10px 10px !important;
}
.bold-font {
font-weight: bold;
}
.google-visualization-table-td-number{
text-align: left !important;
}
.google-visualization-table-sorthdr{
text-align: left !important;
padding: 10px 10px 10px 10px !important;
}
</style>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="chart_div" ></div>
<div id="filter_div" style="margin-left:52px;margin-top:-20px"></div>
<div id="table_div" style="margin-top:10px"></div>
</div>
</body>
</html>