一.折線圖(以時間為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],//名稱和數量
                ]
            }]

        });