門外漢的筆記

Pie chart為FACTORY_A的資料

Stacked bar chart為各Factory的defect堆疊圖

兩者的共通性為defect，所以當篩選Defect時，兩者之間會連動。

▲處理完的資料集

 var datasetSorce= [
                 ["DEFECT_NAME", "FACTORY_A", "FACTORY_C", "FACTORY_B", "FACTORY_D"],
                 ["NOISE", 18, 2, 12, 9],
                 ["NO IMAGE", 14, 2, 1, 1],
                 ["SHUTDOWN", 8, 2, 6, 5],
                 ["WIFI NG", 5, 0, 2, 2],
                 ["ND", 7, 0, 4, 2],
                 ["REMOTE NG", 16, 3, 6, 8],
                 ["AD", 14, 7, 2, 7],
                 ["CASE NG", 7, 1, 4, 2],
                 ["SWITCH NG", 9, 2, 3, 5]
 ];

var xFieldName = "FACTORY";
var yFieldName = "DEFECT_NAME";
var columnHeaders = datasetSorce[0].slice(1, datasetSorce[0].length);
var rowHeaders = datasetSorce.map(d => { return d[0]; });
rowHeaders = rowHeaders.slice(1, rowHeaders.length);

option = {
                title: {
                },
                tooltip: {
                    trigger: 'item',
                    formatter: ''
                },
                dataset: {
                    source:datasetSorce
                },
                xAxis: { type: 'category' },
                yAxis: { type: 'value'},
                grid: [{
                    top: 550,
                    width: '50%',
                    bottom: '45%',
                    left: 10,
                    containLabel: true
                }],
                legend: {type: 'scroll',
                    orient: 'vertical',
                    right: 20,
                    top: 20,
                    bottom: 20,},
                series: [{ type: 'bar', stack: true, seriesLayoutBy: 'row' },
                        { type: 'bar', stack: true, seriesLayoutBy: 'row' },
                        { type: 'bar', stack: true, seriesLayoutBy: 'row' },
                        { type: 'bar', stack: true, seriesLayoutBy: 'row' },
                        { type: 'bar', stack: true, seriesLayoutBy: 'row' },
                        { type: 'bar', stack: true, seriesLayoutBy: 'row' },
                        { type: 'bar', stack: true, seriesLayoutBy: 'row' },
                        { type: 'bar', stack: true, seriesLayoutBy: 'row' },
                                            { type: 'bar',  stack: true, seriesLayoutBy: 'row' },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '40%',
                        center: ['40%', '30%'], //x y
                        label: {
                            formatter: '{b}:{@FACTORY_A} {d}%'
                        },
                        encode: {
                        itemName: 'DEFECT_NAME',
                        value:'FACTORY_A',
                        }
                    }
                ]
            };

有關排序的操作，因沒有支援排序設定，只能從資料排序完再丟給option。

以下是針對pie chart的數值排序，根據columnHeaders索引排序，再對二維資料進行排序。

var seriesName = 'FACTORY_A';
var seriesNameIndex = columnHeaders.indexOf(seriesName)+1; //因0是FOR yfieldName所以要+1 (yfieldName=DEFECT_NAME)
datasetSorce.sort((a, b) => { return b[seriesNameIndex]-a[seriesNameIndex]; }); //由大至小b-a 由小至大 a-b

若stacked bar chart要針對所有defect排序，也就是全部最多的defect在下面，則需要將Defect統計完，再取得Defect name的順序，然後再option依此順序建立series。