溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
簡單介紹:
說明: Highcharts(4.1.6)是國際知名的一款圖表插件,完全基于JS編寫實(shí)現(xiàn),可以輕松構(gòu)建出各種圖表類型,包括折線圖(Line Charts)/面積圖(Area Charts)/柱狀圖(Column Charts)/條形圖(Bar Charts)/餅圖(Pie Charts)/散點(diǎn)圖(Scatter Charts)/氣泡圖(Bubble Charts)/動態(tài)圖(Dynamic Charts)/組合圖(Combinations)/3D圖(3D charts)/儀表盤(Gauges Charts)/熱圖(Heatmaps Charts)等
小試牛刀:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Highcharts</title>
<style type="text/css">
#container {
width: 900px;
height: 300px;
border: solid 1px #000000;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var options = {
// 圖表基本信息
chart: {
// 指定圖表類型
type: 'line',
},
// 設(shè)置圖表標(biāo)題
title: {
// 設(shè)置圖表標(biāo)題內(nèi)容
text: '杭州一周最高溫度'
},
// 設(shè)置圖表副標(biāo)題
subtitle: {
// 設(shè)置圖表副標(biāo)題內(nèi)容
text: '2016-11-00 - 2016-11-07'
},
// 定義圖表數(shù)據(jù)列
series: [
// 設(shè)置首個(gè)數(shù)據(jù)列
{
// 設(shè)置數(shù)據(jù)列標(biāo)題
name: '最高溫度',
// 設(shè)置數(shù)據(jù)列數(shù)據(jù)
data: [7, 11, 8, 7, 9, 9, 9]
}
]
}
// 在容器中繪制圖表
$('#container').highcharts(options)
})
</script>
</body>
</html>說明: 如上制作杭州連續(xù)一周最高溫度折線圖,非常簡單,Highcharts核心主體就是圖表配置項(xiàng)對象,該對象包含了圖表的各類數(shù)據(jù)和配置信息,每個(gè)部分又可以分為更小的配置項(xiàng)對象,只要按照規(guī)范的格式,填寫對應(yīng)的數(shù)據(jù)和配置值就可以了,當(dāng)然按照傳統(tǒng)JS對象逐個(gè)賦值方式也是可以實(shí)現(xiàn)的,但是更推薦如上方式統(tǒng)一設(shè)置
配置選項(xiàng):
說明: Highcharts圖標(biāo)配置選項(xiàng)眾多,最直接的方式就是打開Highcharts(4.1.6)目錄中的api目錄中的highcharts.html,Highcharts.setOptions為全局配置選項(xiàng),包含global(公共配置)和lang(本地化配置),$("#container").highcharts是我們常用的配置子項(xiàng)
| 子項(xiàng) | 說明 |
| chart | 圖表基本配置項(xiàng) |
| colors | 全局顏色 |
| credits | 版權(quán)信息配置項(xiàng) |
| data | 高級數(shù)據(jù)模塊配置項(xiàng) |
| drilldown | 下鉆功能配置項(xiàng) |
| exporting | 導(dǎo)出功能配置項(xiàng) |
| labels | 標(biāo)簽配置項(xiàng) |
| legend | 圖例配置項(xiàng) |
| loading | 加載動畫配置項(xiàng) |
| navigation | 導(dǎo)航配置項(xiàng) |
| noData | 無數(shù)據(jù)模塊配置項(xiàng) |
| pane | 面板模塊配置項(xiàng) |
| plotOptions | 繪圖區(qū)配置項(xiàng) |
| series | 數(shù)據(jù)列配置項(xiàng) |
| subtitle | 副標(biāo)題配置項(xiàng) |
| title | 標(biāo)題配置項(xiàng) |
| tooltip | 提示框配置項(xiàng) |
| xAxis | X軸配置項(xiàng) |
| yAxis | Y軸配置項(xiàng) |
說明: 細(xì)心的大家可能發(fā)現(xiàn)plotOptions.series子項(xiàng)和除plotOptions.series之外的子項(xiàng)和series子項(xiàng)很多配置選項(xiàng)重復(fù),但是相同的設(shè)置是有優(yōu)先級的,其中series子項(xiàng)設(shè)置優(yōu)先級大于除plotOptions.series之外的子項(xiàng)設(shè)置,除plotOptions.series之外的子項(xiàng)設(shè)置優(yōu)先級大于plotOptions.series子項(xiàng)設(shè)置,所以尤其在一個(gè)容器內(nèi)包含多個(gè)圖表類型時(shí),合理利用優(yōu)先級,可有效減少代碼編寫量,所以針對圖表通用配置可通過plotOptions.series設(shè)置,對于所有同類型圖表配置可通過除plotOptions.series之外的子項(xiàng)設(shè)置,針對特定的圖表設(shè)置可通過series設(shè)置.
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼