highcharts 折線圖 餅圖
阿新 • • 發佈:2018-12-17
一.折線圖(以時間為x軸)
先上一張效果圖
直接上程式碼
function graph(data) { $('#container').highcharts({ global:{ useUTC:false }, chart: { type: 'spline' }, credits:{ enabled:false }, title: { text: '' }, xAxis: { type: 'datetime', //以時間為x軸 dateTimeLabelFormats: { day: '%H:%M' //顯示的時間格式,百度dateTimeLabelFormats可以找到更多格式 } }, yAxis: { title: { text: '' }, min:0, labels : { formatter:function (){ return this.value + 'Gbps(y軸單位)' ; } } }, tooltip: { valueSuffix: 'Gbps(y軸單位)' }, plotOptions: { spline: { lineWidth: 2, states: { hover: { lineWidth: 3 } }, marker: { enabled: false } } }, series: [ { name:'Traffic_Flood(折現圖名稱1)', pointInterval:'30000(30s,x軸時間間隔,以毫秒為單位)', pointStart:Date.UTC('2018(年)','10(月)','26(日)','12(時)','30(分)','30(秒)'),(開始時間) pointEnd:Date.UTC('2018(年)','10(月)','26(日)','12(時)','40(分)','30(秒)'),(結束時間) data:[1,2,3,4,5,……,19,20] //y軸資料,例如1對應2018.10.26.12.30.30,20對應2018.10.26.12.40.30 }, { name:'Traffic_Flood(折現圖名稱2)', pointInterval:'30000(30s,x軸時間間隔,以毫秒為單位)', pointStart:Date.UTC('2018(年)','10(月)','26(日)','12(時)','30(分)','30(秒)'), pointEnd:Date.UTC('2018(年)','10(月)','26(日)','12(時)','40(分)','30(秒)'), data:[1,2,3,4,5,……,19,20] //y軸資料,例如1對應2018.10.26.12.30.30,20對應2018.10.26.12.40.30 },…… ] }); }
二.餅圖
先上一張效果圖
直接上程式碼
$('#container1').highcharts({ chart: { renderTo: 'chart' }, title: { text: '支付-Active 統計圖' }, plotArea: { shadow: null, borderWidth: null, backgroundColor: null }, tooltip: { formatter: function() { //重點在這個格式這裡 return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+ Highcharts.numberFormat(this.y, 0, ',') +' 個)'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, formatter: function() { if (this.percentage > 4) return this.point.name; }, color: 'white', style: { font: '13px Trebuchet MS, Verdana, sans-serif' } } } }, legend: { backgroundColor: '#FFFFFF', x: 0, y: -30 }, credits: { enabled: false }, series: [{ type: 'pie', name: 'Browser share', data: [ ['付款-Active 合格',120], ['付款-Active 不合格',130],//名稱和數量 ] }] });