建議還是使用表格型式，資料操作上比較直觀，若需要資料輸出成Excel也不用再處裡一次。
(Google chart在產生圖形的時候會生成一張資料表，利用座標就可存取行列等相關值。)
若只是一般pie chart，可使用這種方式生成資料。
後端做過初步統計的資料
將yField作為Main，將xField作為Sub，資料產出為object。
var dataGroup = d3.nest()
.key(function (d) { return d.yField; })
.key(function (d) { return d.xField; })
.rollup(f=>d3.sum(f, function (g) { return g.count; }) )
.object(data);
利用Object.keys取得所有Object的主項目
var rowHeaders = Object.keys(dataGroup);
利用d3.map取得所有Seris的項目
var columnHeaders = d3.map(data, (d) => { return d.xField; }).keys().sort();
ECharts Options
dataset裡面又分dimensions與source，dimensions為標題的陣列格式，source為資料的陣列+多個物件的格式
dataset: {
dimensions: ['product', '2015', '2016', '2017']
source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1} ]
}
serie根據有幾個圖例就要設定幾個，非常繁瑣。
series: [
{type: 'bar'}, //2015
{type: 'bar'}, //2016
{type: 'bar'} //2017
]
dimensions資料處理方式
使用concat將Array陣列連接
var itemName=['Defect'];
var datasetDimensions = (itemName.concat(columnHeaders);
source資料處理方式
使用$.each遍歷object物件，利用$.extend將object物件連接。
var datasetSource= [];
$.each(dataGroup, function (key, value) {
var obj = {Defect:key};
datasetSource.push($.extend(obj,value));
});
series的設定處理
一個一個設定太繁瑣，所以會使用遍歷方式把columnHeaders的項目數量作為設定。
bar chart
var optionSeries = [];
columnHeaders.forEach((d, i) => { //i=0~3 d=FACTORY_A~FACTORY_D
var s = { type: 'bar'}
optionSeries.push(s);
});
stacked bar chart
var optionSeries = [];
columnHeaders.forEach((d, i) => {
var s = {
name: d,
type: 'bar',
stack: true,
}
optionSeries.push(s);
});
生成option並產生chart
option = {
legend: {},
tooltip: {},
dataset: {
dimensions: datasetDimensions,
source: datasetSource
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
formatter: (d, i)=>{
if (i % 2 > 0) return "\n\n" + d;
else return d;
}
}
},
yAxis: {},
series: optionSeries
};
myChart.setOption(option);
----------------------------------------------------------
Array串接或連接使用 原本Array.concat(增加的Array)
Array插入新物件或陣列用push
Object串接或連接使用$.extend
留言列表
