Highcharts 是一個(gè)用純 JavaScript 編寫(xiě)的一個(gè)圖表庫(kù)， 能夠很簡(jiǎn)單便捷的在 Web 網(wǎng)站或是 Web 應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。
支持的圖表類(lèi)型有直線圖、曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、儀表圖、氣泡圖、瀑布流圖等多達(dá) 20 種圖表，其中很多圖表可以集成在同一個(gè)圖形中形成混合圖。
經(jīng)過(guò)多年的開(kāi)發(fā)和維護(hù)擁有著豐富的圖表功能和穩(wěn)定的性能以及專(zhuān)業(yè)詳細(xì)的開(kāi)發(fā)文檔上手極其容易，展現(xiàn)出來(lái)也是極其的美觀簡(jiǎn)約大氣，相比與echarts有完整的實(shí)例演示，功能介紹和詳細(xì)的api文檔。
網(wǎng)址：https://www.hcharts.cn/demo/highcharts
https://www.hcharts.cn/demo/highcharts/heatmap-canvas
五分鐘上手代碼
圖片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三分鐘上手Highcharts 圖表</title>
</head>
<body>
<!-- 圖表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
// 圖表配置
var options = {
chart: {
type: 'bar' //指定圖表的類(lèi)型，默認(rèn)是折線圖（line）
},
title: {
text: '三分鐘上手Highcharts 圖表' // 標(biāo)題
},
xAxis: {
categories: ['薄荷糖', '牛奶糖', '巧克力豆'] // x 軸分類(lèi)
},
yAxis: {
title: {
text: '吃糖個(gè)數(shù)' // y 軸標(biāo)題
}
},
series: [{
// 數(shù)據(jù)列
name: '王小婷', // 數(shù)據(jù)列名
data: [1, 0, 7], // 數(shù)據(jù)
}, {
name: '安安',
data: [2, 4, 3]
}]
};
// 圖表初始化函數(shù)
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
1：Highcharts柱狀圖寬度
如何修改Highcharts柱狀圖柱子的寬度：pointWidth:5 //柱子之間的距離值設(shè)置這個(gè)屬性
series: [{
name: '溫度',
data: [
[1, 2],
[2, 5],
[5, 9],
],
pointWidth:5 //柱子之間的距離值
}]
圖片.png
2：ajax數(shù)據(jù)交互示例代碼
$.ajax({
url : "/bison/signIn/count/countOrgan",
async : false,
data : {
beginDate : $("#beginTime").val(),
endDate : $("#endTime").val(),
personSex : $("#personSex").val(),
organIds : getOrganIds(),
signSetId : $("#signSet option:selected").val(),
},
type : 'POST',
dataType : 'json',
success : function(data) {
// 成功時(shí)執(zhí)行的回調(diào)方法
category_data = data.returnData.response.categor;
natural_data = data.returnData.response.normalList;
late_data = data.returnData.response.lateList;
absent_data = data.returnData.response.absentList;
fun(category_data, natural_data, late_data, absent_data);
},
error : erryFunction
// 錯(cuò)誤時(shí)執(zhí)行方法
});
