折線圖與曲線圖可(kě)以顯示随時(shí)間(jiān)而變化的連續數(shù)據，因此非常适用于顯示在相等時(shí)間(jiān)間(jiān)隔下數(shù)據的趨勢。本文将結合Highcharts，生(shēng)成一個(gè)城市氣溫變化折線圖和(hé)一個(gè)随時(shí)間(jiān)動态即時(shí)顯示CPU走勢的曲線圖。

如果您看了本站(zhàn)前面兩篇關于Highcharts的文章，應該對Highcharts有(yǒu)所了解，所以本文側重JS配置來(lái)完成圖表的設計(jì)。如果您還(hái)不知道(dào)什麽是Highcharts，請(qǐng)先閱讀本站(zhàn)前面的文章。

1、城市氣溫變化折線圖

通(tōng)過以下配置，可(kě)以生(shēng)成一個(gè)帶網格的、顯示數(shù)據點具體(tǐ)數(shù)據的、可(kě)放大(dà)的、去除LOGO标簽的折線圖。具體(tǐ)請(qǐng)看代碼和(hé)注釋

var chart;
$(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_line', //圖表放置的容器(qì)，DIV
            defaultSeriesType: 'line', //圖表類型line(折線圖),
			zoomType: 'x'   //x軸方向可(kě)以縮放
        },
		credits: {
			enabled: false   //右下角不顯示LOGO
		},
        title: {
            text: '主要城市月平均氣溫' //圖表标題
        },
        subtitle: {
            text: '2011年'  //副标題
        },
        xAxis: {  //x軸
            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月',
 '11月', '12月'], //x軸标簽名稱
			gridLineWidth: 1, //設置網格寬度為(wèi)1
			lineWidth: 2,  //基線寬度
			labels:{y:26}  //x軸标簽位置：距X軸下方26像素
        },
        yAxis: {  //y軸
            title: {text: '平均氣溫(°C)'}, //标題
			lineWidth: 2 //基線寬度
        },
		plotOptions:{ //設置數(shù)據點
			line:{
				dataLabels:{
					enabled:true  //在數(shù)據點上(shàng)顯示對應的數(shù)據值
				},
				enableMouseTracking: false //取消鼠标滑向觸發提示框
			}
		},
		legend: {  //圖例
            layout: 'horizontal',  //圖例顯示的樣式：水(shuǐ)平（horizontal）/垂直（vertical）
            backgroundColor: '#ffc', //圖例背景色
            align: 'left',  //圖例水(shuǐ)平對齊方式
            verticalAlign: 'top',  //圖例垂直對齊方式
            x: 100,  //相對X位移
            y: 70,   //相對Y位移
            floating: true, //設置可(kě)浮動
            shadow: true  //設置陰影(yǐng)
        },
		exporting: {
			enabled: false  //設置導出按鈕不可(kě)用
		},
        series: [{  //數(shù)據列
            name: '北京',
            data: [ - 4.6, -2.2, 4.5, 13.1, 19.8, 24.0, 25.8, 24.4, 19.3, 12.4, 4.1, -2.7]
        },
        {
            name: '廣州',
            data: [13.3, 14.4, 17.7, 21.9, 24.6, 27.2, 30.8, 32.1, 27.2, 23.7, 21.3, 15.6]
        }]
    });
});

2、CPU使用記錄走勢圖

通(tōng)過相關配置，可(kě)以生(shēng)成一個(gè)随着時(shí)間(jiān)變化（每隔5秒(miǎo)更新一次）的曲線圖。

var chart;
$(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_spline', //圖表放置的容器(qì)，DIV
            defaultSeriesType: 'spline', //圖表類型為(wèi)曲線圖
            events: {
                load: function() { 
                    var series = this.series[0];
					//每隔5秒(miǎo)鍾，圖表更新一次，y數(shù)據值在0-100之間(jiān)的随機數(shù)
                    setInterval(function() {
                        var x = (new Date()).getTime(), // 當前時(shí)間(jiān)
                        y = Math.random()*100; 
                        series.addPoint([x, y], true, true);
                    },
                    5000);
                }
            }
        },
        title: {
            text: 'CPU使用記錄走勢圖'  //圖表标題
        },
        xAxis: { //設置X軸
            type: 'datetime',  //X軸為(wèi)日期時(shí)間(jiān)類型
            tickPixelInterval: 150  //X軸标簽間(jiān)隔
        },
        yAxis: { //設置Y軸
			title: '',
			max: 100, //Y軸最大(dà)值
			min: 0  //Y軸最小(xiǎo)值
        },
		tooltip: {//當鼠标懸置數(shù)據點時(shí)的提示框
			formatter: function() { //格式化提示信息
				return 'CPU使用率 '+
				Highcharts.dateFormat('%H:%M:%S', this.x) +'
'+ 
				Highcharts.numberFormat(this.y, 2)+'%';
			}
		},
        legend: {
            enabled: false  //設置圖例不可(kě)見
        },
        exporting: {
            enabled: false  //設置導出按鈕不可(kě)用
        },
		credits: {
			text: 'Helloweba.com', //設置LOGO區(qū)文字
			url: 'http://www.helloweba.com' //設置LOGO鏈接地址
		},
        series: [{
            data: (function() { //設置默認數(shù)據，
                var data = [],
                time = (new Date()).getTime(),
                i;

                for (i = -19; i <= 0; i++) {
                    data.push({
                        x: time + i * 5000, 
                        y: Math.random()*100
                    });
                }
                return data;
            })()
        }]
    });
});

注意，當X軸類型為(wèi)datetime日期時(shí)間(jiān)型的，需要設置時(shí)區(qū)，在開(kāi)頭加上(shàng)以下代碼即可(kě)：

Highcharts.setOptions({
	global: {
		useUTC: false
	}
});