使用數據庫中的Google圖表創建堆疊式圖表

Question

我的api返回下表：

Date        Name      Size
2018-17-09  John      500
2018-17-09  Doe       1000
2018-17-09  Jack      3000
2018-17-09  Choi      700
2018-18-09  John      6000
2018-18-09  Doe       200
2018-18-09  Jack      555
2018-19-09  John      700
2018-19-09  Doe       9000

我的目標是按名稱和日期顯示圖表。 x軸為日期，y軸為大小。

我對Google圖表非常陌生，需要一些幫助。 非常感謝！

Answer 1

為了按日期堆疊每個名稱的列，
您的表的結構需要如下所示，
每個名稱帶有列/系列。

['Date', 'John', 'Doe', 'Jack'],
['2018-17-09', 500, 1000, 3000],

在服務器/查詢上很難做到這一點，
特別是如果您不知道會先有多少個名字。

因此，我們可以使用Google數據表方法
從服務器轉換數據，
變成我們需要的格式。

首先，我們創建一個帶有必要列的數據視圖，
然后我們可以按日期匯總/匯總視圖。

請參閱以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { // create data table var data = google.visualization.arrayToDataTable([ ['Date', 'Name', 'Size'], ['2018-17-09', 'John', 500], ['2018-17-09', 'Doe', 1000], ['2018-17-09', 'Jack', 3000], ['2018-17-09', 'Choi', 700], ['2018-18-09', 'John', 6000], ['2018-18-09', 'Doe', 200], ['2018-18-09', 'Jack', 555], ['2018-19-09', 'John', 700], ['2018-19-09', 'Doe', 9000], ]); // create data view var view = new google.visualization.DataView(data); // column arrays var aggColumns = []; var viewColumns = [0]; // build view & agg columns for each name data.getDistinctValues(1).forEach(function (name, index) { viewColumns.push({ calc: function (dt, row) { if (dt.getValue(row, 1) === name) { return dt.getValue(row, 2); } return null; }, label: name, type: 'number' }); aggColumns.push({ aggregation: google.visualization.data.sum, column: index + 1, label: name, type: 'number' }); }); // set view columns view.setColumns(viewColumns); // sum view by date var aggData = google.visualization.data.group( view, [0], aggColumns ); // draw chart var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(aggData, { isStacked: true }); }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>