[ASP.NET C#] 032 | ECharts - Pie chart @ 門外漢的筆記

後端資料處裡請參考 [ASP.NET C#] 022 | 使用d3.js建立一般資料表 table

▲原始資料

1. 把資料群組化

var dataGroup = d3.nest()
                .key(function (d) { return d.yField; })
                .rollup(f => d3.sum(f, function (g) { return g.count; }))
                .entries(data)  //使用object排序上有問題
.sort((a, b) => d3.descending(a.value, b.value));

▲object {key:value}

▲entries [{key: data,vlaue:data},{}]

2. 取得項目名稱

var rowHeaders = d3.map(dataGroup, d => { return d.key; }).keys();

//legend.data:['AS', 'CASE']

3. 資料格式化

var seriesData= [];
$.each(dataGroup, function (i, d) { //key value
var obj = {name:d.key,value:d.value};
seriesData.push(obj);
});

//series.data:[{value:10,name:'AS'}, {value:5,name:'CASE'}]

4. 設定

option = {
title: {
text: 'Defect分布',
subtext: 'subtext',
left: '30%'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 20,
top: 20,
bottom: 20,
data: rowHeaders
},
series: [
{
name: 'Defect分布',
type: 'pie',
radius: '55%',
center: ['40%', '60%'],
data: seriesData,
//[{name: 'ND',value: 335}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

使用dataset產生多圖檔

1. 生成二維資料表

var data = dataset.data;
var xFieldName = dataset.xFieldName;
var yFieldName = dataset.yFieldName;

var dataGroup = d3.nest()
.key(function (d) { return d.yField; })
.rollup(function(f) { return {
total: d3.sum(f, function (d) { return d.count; }),
lists: f
};})
.entries(data);

var columnHeaders = d3.map(data, (d) => { return d.xField; }).keys();
var rowHeaders = d3.map(dataGroup, (d) => { return d.key; }).keys();

var datasetSorce= [];
datasetSorce.push(([yFieldName].concat(columnHeaders)));
$.each(dataGroup, function (i, d) {
var s = [];
s[0]=d.key;
columnHeaders.forEach((f,i) => s[i+1] =0);
d.value.lists.forEach(g => { s[columnHeaders.indexOf(g.xField) + 1] = g.count;})
datasetSorce.push(s);
});