hicharts.js的優勢

1. 相容ie6以上瀏覽器
2. 完美支援移動端
3. api全面而豐富
4. 自適應瀏覽器寬度

例項演示基礎折線圖

html部分

<!--引入hicharts.js框架的提供的js檔案-->
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

<!--設定一個帶有id的空白div-->
<div id="box"></div>

 

js部分

var chart = Highcharts.chart('box',{
    chart: {
        type: 'column'
    },
    title: {
        text: '月平均降雨量'
    },
    subtitle: {
        text: '資料來源: WorldClimate.com'
    },
    xAxis: {
        categories: [
            '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '降雨量 (mm)'
        }
    },
    tooltip: {
        // head + 每個 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    series: [{
        name: '東京',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: '紐約',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    }, {
        name: '倫敦',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    }, {
        name: '柏林',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    }]
});

 

效果圖如下

現在一個基本的柱狀圖就完成，上面特意加了一些標註

然後就是自定義折線圖的樣式

• 設定版權資訊

credits: {
    enabled:true,                    // 預設值，如果想去掉版權資訊，設定為false即可
    text: 'www.hcharts.cn',             // 顯示的文字
    href: 'http://www.hcharts.cn',      // 連結地址
    position: {                         // 位置設定 
        align: 'left',
        x: 400,
        verticalAlign: 'bottom',
        y: -100
    },
    style: {                            // 樣式設定
        cursor: 'pointer',
        color: 'red',
        fontSize: '30px'
    }
}
 

• 座標軸

xAxis:{
	title:{
	    text:'x軸標題',
	 	align: 'high'		//對齊方式
	}
}
yAxis:{
	title: {
		text: 'y軸標題',
		align: 'high',		//對齊方式
		offset: 0,
		rotation: 0,
		y: -10
	}
}

• 資料列顏色

colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
    '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'] 		//這裡是預設顏色值，可以直接修改

• 圖例

legend: {
	itemStyle: {			//圖例樣式
		color: '#444444',
		fontSize: '16px',
		fontWeight: '400'
	},
	align: 'right',		//圖例對齊方式
	verticalAlign: 'top',
	y: 0,
	symbolWidth: 40,	 //圖例寬度
},

• 資料列

series:[{
	data:[],		//資料
    animation: true,		//動畫屬性
	marker: {				//引入圖片
		symbol: "url(.png)"
	}
}]

• 資料提示框

tooltip:{
	animation: true, 		//動畫屬性
	style: {				//自定義樣式
	}
}

• Ajax 請求資料介面

$.get(url, {
    // 引數
}, function(data) {
    // data 為伺服器返回的資料
});

這樣基本的資料統計圖功能介紹完了，詳細文件請看官方api~hicharts.js