我有一个代码来获取图表的向下钻取功能。无法在谷歌仪表板中放置相同的内容，我有一个类别过滤器，任何人都可以帮助我将代码作为新手。
这是我需要的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>
<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']});
google.load('visualization', '1.0', {'packages':['controls']});
// 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 category_picker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'category_picker_div1',
'options': {
'filterColumnLabel': 'Category',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
var topLevel = true;
// Create a Column chart, passing some options
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'ColumnChart_div',
'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);
}
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);
}
}
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();
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([category_picker1],[chart]).
// Draw the entire dashboard.
draw(data);
}
/*
function _log(data) {
console.log(data);
} */
</script>
</head>
<body>
<div id="dashboard"/>
<!--Divs that will hold each control and chart-->
<div id="category_picker_div1"></div>
<div id="ColumnChart_div"></div>
<!--Div that will hold the pie chart-->
</div>
</body>
</html>
请建议。
此致 Prajna