0
누구나 나를 구글 채팅 대시 보드에서 기능을 드릴 다운을 달성하기 위해 코드를 제안 할 수 있습니까?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>
감사합니다, 반야
드릴 다운 기능은 무엇입니까? – danhardman
@ Mr.E Say 만약 내가 년을 클릭하면 다음 레벨로 드릴 다운해야 월을 말하고 그 다음 주 그리고 그 다음 일을 말합니다. 드릴 다운 기능이라고합니다. – Prajna
게시 코드 중 일부를 게시하십시오. – danhardman