1
Google Charts를 사용하는 법을 배우고 있으며 모든 값의 평균을 얻고 평균을 나타내는 차트에 선을 표시하려고합니다.Google 차트의 평균 라인 만들기
다음은 내 차트의 모양입니다. 그러나 모든 값에 평균선이 필요합니다.
미리 감사드립니다.
<html>
<body style="font-family: Arial;border: 0 none;">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard" style="width:1300px;overflow:scroll;">
<div id="chart" style="position: relative; width: 1300px; height: 300px;"></div>
<div id="control" style="position: relative; width: 1300px; height: 30px;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {
callback: function() {
var query = new google.visualization.Query('xxxxxxx');
query.setQuery('select A,B,C,D');
query.send(function (response) {
if (response.isError()) {
console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'ScatterChart',
chartOptions: {
pointSize: 2,
chartArea: {width: '90%'},
hAxis: {format: 'dd/MM/yyyy'}
},
chartView: {
columns: [ 0, 1, 2]
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'SteppedAreaChart',
containerId: 'chart',
options: {
filterColumnIndex: 0,
pointSize: 2,
chartArea: {height: '80%', 'width': '90%'},
hAxis: {format: 'E dd/MMM','textStyle':{'fontSize': 11, 'color': 'black','bold':true},'minTextSpacing': 0, 'slantedText': false},
vAxis: {format: '0'},
legend: {position: 'top'},
bar: {groupWidth: '100%'},
isStacked: false
},
view: {
columns: [ 0, 1,2]
}
});
var proxyTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'TableProxy',
options: {
page: 'enable',
pageSize: 1
},
view: {
columns: [0]
}
});
google.visualization.events.addListener(proxyTable, 'ready', function() {
var dt = proxyTable.getDataTable();
var groupedData = google.visualization.data.group(dt, [0], [{
column: 2,
type: 'number',
aggregation: google.visualization.data.avg
}]);
chart.setDataTable(groupedData);
chart.draw();
});
google.visualization.events.addListener(proxyTable, 'ready', function() {
var group = google.visualization.data.group(proxyTable.getDataTable(), [{
column: 0,
type: 'date',
modifier: function() {
return 1;
}
}], [{
column: 2,
type: 'number',
aggregation: google.visualization.data.avg
}]);
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(control, chart);
dashboard.draw(response.getDataTable());
});
},
packages: ['controls', 'corechart', 'table'], 'language': 'pt-br'
});
</script>
</body>
</html>
그것은 날짜 (코드 우는 소리)에 의해 그룹에 수 ...하지만 할 수있는 주요 어려운 일이 controlType 사용하는 방법입니다 : 'ChartRangeFilter를'. 누구든지 어떤 생각을 가지고 ??
function floorDate(datetime) {
var newDate = new Date(datetime);
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);
return newDate;
}
var columnChart1 = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart3'
});
// columnChart1.draw();
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure & bind the controls
bind(divPicker, [table, columnChart]).
// Draw the dashboard
draw(data);
google.visualization.events.addListener(divPicker, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable(google.visualization.data.group(
// get the filtered results
table.getDataTable(), [{
'column': 0,
'modifier': floorDate,
'type': 'date'
}], [{
'column': 2,
'aggregation': google.visualization.data.sum,
'type': 'number'
}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
google.visualization.events.addListener(divPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable(google.visualization.data.group(table.getDataTable(), [0], [{
'column': 2,
'aggregation': google.visualization.data.avg,
'type': 'number'
}]));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
}
google.setOnLoadCallback(drawVisualization);
</script>
이 문제에 관심을 가져 주셔서 감사합니다. 추세선 전에 시리즈에 적용했습니다. 이것은 결과를 볼 수있는 링크입니다. [참조 링크 - 암호는 Simpsons입니다] (https://script.google.com/macros/s/AKfycbwjLUZ99iav6fUcMBYfGXCmXMqxcjqU7DGbT48b17UDdiK5lGCW/exec) – Lean