【JQuery】折線圖

使用JQuery前,需要引用Jquery元件及HighChart相關元件

HTML 頁面 :

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Javascript 部份 :

$(function () {
    var chart;

    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',  // 取 DIV ID值 
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },

            title: {
                text: '每月平均氣溫',  //標題
                x: -20 //center
            },

            subtitle: {
                text: '測試數據',  //副標題
                x: -20
            },

            xAxis: {  // X軸 類別
                categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月']
            },

            yAxis: {   // Y軸
                title: { 
                    text: '溫度-攝氏 (°C)'  // 標題
                },

                plotLines: [{   //設 基準線
                    value: 0,    // 基準線-值
                    width: 1,   // 基準線-寬度
                    color: '#808080'  //基準線-顏色
                }]
            },

            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },

            legend: {  //右邊 項目區塊
                layout: 'vertical',
                align: 'right',  // 項目擺放位置: 右邊
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 1  // 加邊框
            },

            series: [{  //以下 填 項目與數據 可以多個資料內容, 範例舉4個

                name: '東京',  //項目名稱
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  //數據資料
            }, {

                name: '紐約',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {

                name: '台北',
                data: [8.9, 10.6, 15.5, 18.4, 22.5, 26.0, 31.6, 35.9, 28.3, 16.0, 12.9, 10.0]
            }, {
                name: '倫敦',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

            }]

        });
    });
 
});

執行畫面 :

參考資源 :

https://www.highcharts.com/demo  
免費的動態圖表