为此的典型代码片段是这样的:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
但是我需要对另一种格式做同样的事情:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Data', 'Id'],
['2004', 400, 'Expenses']
['2004', 1000, 'Sales'],
['2005', 1170, 'Sales'],
['2005', 460, 'Expenses'],
['2006', 660, 'Sales'],
['2006', 1120 'Expenses'],
['2007', 1030, 'Sales'],
['2007', 540, 'Expenses']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
我一直在阅读google图表文档,发现了该功能group()
。我认为这可能是可行的。
但是我无法复制我需要的行为。
首先,我们需要为每个编号(销售,费用)
使用单独的列,然后才能将数据视图与已计算的列一起使用。
然后我们将使用group函数折叠行并删除重复的x轴值。
请参阅以下工作片段。
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Data', 'Id'],
['2004', 400, 'Expenses'],
['2004', 1000, 'Sales'],
['2005', 1170, 'Sales'],
['2005', 460, 'Expenses'],
['2006', 660, 'Sales'],
['2006', 1120, 'Expenses'],
['2007', 1030, 'Sales'],
['2007', 540, 'Expenses']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom'
}
};
// create data view with columns for each id
var view = new google.visualization.DataView(data);
var aggColumns = [];
var viewColumns = [0]; // <-- include x-axis as first column
data.getDistinctValues(2).forEach(function (id, index) {
// add view column for id
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 2) === id) {
return dt.getValue(row, 1);
}
return null;
},
label: id,
type: 'number'
});
// add agg column for id
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: id,
type: 'number'
});
});
view.setColumns(viewColumns);
// aggregate data view
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(aggData, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句