https://www.wra.gov.tw/Scripts/chart.js

1function ShowChart(Config, chartID) {
2    console.log(Config);
3    console.log(chartID);
4    var myChart;
5    const ctx = document.getElementById(chartID).getContext('2d');;
6    //定義一個包含所有可能的 pointStyle 的數組
7    var pointStyles = ['circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', 'dash'];
8    // 隨機選擇一個 pointStyle
9    function getRandomPointStyle(index) {
10        return pointStyles[index % pointStyles.length];
11    }
12
13    function _mapToSeries() {
14
15        Config.series = new Array();
16
17        var mapGeoType = $('select[name*="ddlMapGeoType"]').val();
18        if (mapGeoType == undefined || mapGeoType == '')
19            mapGeoType = 'tw';
20
21
22        if (Highcharts.maps[mapGeoType] == undefined) {
23            $.ajaxSettings.async = false;
24            $.getJSON('/Scripts/Chart/town_geo/' + mapGeoType + '.json', function (test) {
25                Highcharts.maps[mapGeoType] = test;
26            });
27        }
28        Config.mapGeoType = mapGeoType;
29        Config.mapseries[0].mapData = Highcharts.maps[mapGeoType];
30        Config.series.push(Config.mapseries[0]);
31        //console.log(Config);
32        //console.log(JSON.stringify(Config.mapseries[0].data.length));
33        //Config.yAxis = Config.yAxisSingle;
34        delete Config.yAxis;
35    }
36
37    function _pieToSeries() {
38        Config.series = new Array();
39        Config.series.push(Config.pieseries[0]);
40        Config.yAxis = Config.yAxisSingle;
41    }
42    function _lineToSeries() {
43        Config.series = new Array();
44        Config.series = Config.seriesline;
45        Config.yAxis = Config.yAxisSingle;
46    }
47
48    function _ConbineToSeries() {
49        Config.series = new Array();
50        Config.series = Config.seriescombine;
51        Config.yAxis = Config.yAxisDouble;
52    }
53
54    var lineType = "line";
55    var chartOptions = {
56        plugins: {
57            title: {
58                font: {
59                    size: 20
60                },
61                display: true,
62                text: function () {
63                    return Config.title.text;
64                }
65            },
66            datalabels: {
67                display: true,
68                align: 'top',
69                backgroundColor: 'rgba(255, 255, 255, 0.7)',
70                borderRadius: 4,
71                formatter: function (value, context) {
72                    return value + Config.tooltip.valueSuffix;
73                }
74            },
75            legend: {
76                labels: {
77                    usePointStyle: true,
78                },
79                position: 'bottom',
80            },
81            tooltip: {
82                usePointStyle: true,
83                callbacks: {
84                    label: function (context) {
85                        var label = context.dataset.label || '';
86                        if (label) {
87                            label += ': ';
88                        }
89                        label += context.raw + ' ' + Config.tooltip.valueSuffix;
90                        return label;
91                    }
92                }
93            }
94        },
95        scales: {
96            x: {
97                offset: true,
98                grid: {
99                    display: false,
100                },
101                title: {
102                    display: false,
103                    text: function () {
104                        return Config.AxisTitle;
105                    },
106                    font: {
107                        size: 16
108                    }
109                }
110            },
111            y: {
112                title: {
113                    display: true,
114                    text: function () {
115                        return Config.yAxis[0].title.text;
116                    },
117                    font: {
118                        size: 16
119                    }
120                },
121                grid: {
122                    offset: true,
123                }
124            },
125            y1: {
126                title: {
127                    display: true,
128                    text: function () {
129                        return Config.yAxisDouble[1].title.text;
130                    },
131                    font: {
132                        size: 16
133                    }
134                },
135                position: 'right',
136                ticks: {
137                    display: false
138                },
139                grid: {
140                    display: false
141                }
142
143
144            }
145        }
146    }
147
148    var labels = Config.xAxis.categories
149    chartOptions.scales.x.display = true;
150    chartOptions.scales.y.display = true;
151    chartOptions.scales.y.beginAtZero = false;
152
153    if (Config.chart.type == "pie") {
154        lineType = "pie";
155        _pieToSeries();
156        labels = Config.series[0].data.map(function (item) {
157            return item.name;
158        });
159        //將Config.pieseries中的第一筆資料中的 data 屬性中的y值取出來成一個陣列
160        var yValues = Config.series[0].data.map(function (item) {
161            return item.y;
162        });
163        copyseries = [{ data: yValues }];
164        chartOptions.responsive = true; //自適應
165        chartOptions.maintainAspectRatio = true;//確保比例
166        chartOptions.devicePixelRatio = 1;//避免過度放大
167        chartOptions.scales.x.display = false;
168        chartOptions.scales.y.display = false;
169        chartOptions.plugins.legend.display = false;
170        chartOptions.plugins.datalabels = {
171            color: "#000", // 文字顏色
172            font: {
173                size: 12
174            },
175            formatter: function (value, context) {
176                return value + " " + Config.tooltip.valueSuffix; // 自訂數據格式
177            }
178        };
179    }
180    else if (Config.chart.type == "map") {
181        lineType = "map";
182        _mapToSeries();
183    }
184    else if (Config.chart.type == "line") {
185        lineType = "line";
186        _lineToSeries();
187        copyseries = JSON.parse(JSON.stringify(Config.series));
188        // 遍歷並修改 JSON 物件

189        copyseries.forEach((item, index) => {
190            item.label = item.name; // 將 name 改為 label
191            item.radius = 5;        // 新增 radius 參數
192            item.pointStyle = getRandomPointStyle(index); //隨機選一個圖標
193        });
194        chartOptions.plugins.datalabels = {
195            anchor: "start", //（"start"、"center"、"end"）
196            align: "top",  //（"top"、"middle"、"bottom"）
197        };
198        chartOptions.scales.x.offset = true;
199        chartOptions.scales.y.offset = false;
200        chartOptions.scales.x.type = "category";
201        chartOptions.scales.y.type = "linear";
202        chartOptions.scales.x.title.display = false;
203        chartOptions.scales.y.title.display = true;
204        chartOptions.indexAxis = "x";
205    }
206    else if (Config.chart.type == "column") {
207        lineType = "bar";
208        _lineToSeries();
209        copyseries = JSON.parse(JSON.stringify(Config.series));
210        // 遍歷並修改 JSON 物件
211        copyseries.forEach((item, index) => {
212            item.label = item.name; // 將 name 改為 label
213            item.radius = 5;        // 新增 radius 參數
214            item.pointStyle = getRandomPointStyle(index); //隨機選一個圖標
215        });
216        if (Config.plotOptions.column.stacking == "normal") {
217            chartOptions.scales.x.stacked = true;
218            chartOptions.scales.y.stacked = true;
219        }
220        else {
221            chartOptions.scales.x.stacked = false;
222            chartOptions.scales.y.stacked = false;
223            //chartOptions.indexAxis = 'y';
224        }
225        chartOptions.plugins.datalabels = {
226            anchor: "end", // （"start"、"center"、"end"）
227            //align: "top",  // （"top"、"middle"、"bottom"）
228        };
229        chartOptions.scales.y.grid.offset = true;
230        chartOptions.scales.x.offset = true;
231        chartOptions.scales.y.offset = false;
232        chartOptions.scales.x.type = "category";
233        chartOptions.scales.y.type = "linear";
234        chartOptions.scales.x.title.display = false;
235        chartOptions.scales.y.title.display = true;
236        chartOptions.indexAxis = "x";
237    }
238    else if (Config.chart.type == "bar") {
239        lineType = "bar";
240        _lineToSeries();
241        copyseries = JSON.parse(JSON.stringify(Config.series));
242        // 遍歷並修改 JSON 物件
243        copyseries.forEach((item, index) => {
244            item.label = item.name; // 將 name 改為 label
245            item.radius = 5;        // 新增 radius 參數
246            item.pointStyle = getRandomPointStyle(index); //隨機選一個圖標
247        });
248        if (Config.plotOptions.bar.stacking == "normal") {
249            chartOptions.scales.x.stacked = true;
250            chartOptions.scales.y.stacked = true;
251        }
252        else {
253            chartOptions.scales.x.stacked = false;
254            chartOptions.scales.y.stacked = false;
255        }
256        chartOptions.plugins.datalabels = {
257            //anchor: "start", // （"start"、"center"、"end"）
258            //align: "top",  // （"top"、"middle"、"bottom"）   
259        };
260        chartOptions.scales.y.grid.offset = true;
261        chartOptions.scales.x.offset = false;
262        chartOptions.scales.y.offset = true;
263        chartOptions.scales.x.title.display = false;
264        chartOptions.scales.y.title.display = false;
265        chartOptions.indexAxis = "y";
266    }
267    else {
268        lineType = "bar";
269        _ConbineToSeries();
270
271        copyseries = JSON.parse(JSON.stringify(Config.series));
272        // 遍歷並修改 JSON 物件
273        copyseries.forEach((item, index) => {
274            if (index == 0)
275                item.type = "line";
276            else
277                item.type = "bar";
278            item.label = item.name; // 將 name 改為 label
279            item.pointStyle = getRandomPointStyle(index); //隨機選一個圖標
280        });
281        chartOptions.plugins.datalabels = {
282            anchor: "end", //（"start"、"center"、"end"）
283            align: "top",  //（"top"、"middle"、"bottom"）
284        };
285        chartOptions.scales.x.offset = true;
286        chartOptions.scales.y.offset = false;
287        chartOptions.scales.x.type = "category";
288        chartOptions.scales.y.type = "linear";
289        chartOptions.scales.x.title.display = false;
290        chartOptions.scales.y.title.display = true;
291        chartOptions.scales.x.stacked = true;
292        chartOptions.scales.y.stacked = true;
293        chartOptions.indexAxis = "x";

294        //設定y軸的值從0開始
295        chartOptions.scales.y.beginAtZero = true;
296    }
297
298
299    if (myChart) {
300        myChart.destroy();
301    }
302
303    console.log(copyseries);
304    console.log(Config);
305    console.log(chartOptions);
306
307    myChart = new Chart(ctx, {
308        type: lineType,
309        data: {
310            labels: labels,
311            datasets: copyseries
312        },
313        options: chartOptions,
314        plugins: [ChartDataLabels]
315    });
316}