Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
什么是數(shù)據(jù)列
數(shù)據(jù)列是一組數(shù)據(jù)集合，例如一條線，一組柱形等。圖表中所有點(diǎn)的數(shù)據(jù)都來自數(shù)據(jù)列對(duì)象，數(shù)據(jù)列的基本構(gòu)造是：
series : [{
name : '',
data : []
}]
提示：數(shù)據(jù)列配置是個(gè)數(shù)組，也就是數(shù)據(jù)配置可以包含多個(gè)數(shù)據(jù)列。
數(shù)據(jù)列中的 name 代表數(shù)據(jù)列的名字，并且會(huì)顯示在數(shù)據(jù)提示框（Tooltip）及圖例（Legend）中
tags:
1.數(shù)據(jù)列中的數(shù)據(jù)填充：
方法一：一維數(shù)組
如果有categories屬性的話就是使用一維數(shù)組
data : [1, 4, 6, 9, 10]
方法二：二維數(shù)組
如果沒有categories屬性的話就是使用二維數(shù)組
data ： [ [5, 2], [6,3], [8,2] ]
方法三：集合
series:[{
data : [{
name : "point 1",
color : "#00ff00",
y : 0
}, {
name : "Point 2",
color : "#ff00ff",
y : 5
}]
}]
2.線條寬度（lineWidth）：
將線條的寬度改為5px默認(rèn)為1px
series: [{
data: [216.4, 194.1, 95.6],
lineWidth: 5
}]
3.數(shù)據(jù)標(biāo)簽（dataLables）：
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
4.線條樣式（Dash Style）:
series: [{
data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
dashStyle: 'longdash'
}, {
data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
dashStyle: 'shortdot'
}]
5.Zoom
series:[{
name:"a",
data:[1,2,3],
zoneAxis: 'x', //指定作用于哪個(gè)軸
zones: [{
value: 1.7,
color:'#90ed7d'//這兩個(gè)屬性是可以放在一起的但不能和dashStyle放在一起
}, {
dashStyle: 'dot'
}]
}]
以上就是本文的全部?jī)?nèi)容，在 Highcharts 中，數(shù)據(jù)列的配置是個(gè)非常重要的配置，同時(shí)又由于可配置的屬性非常對(duì)，配置的靈活性非常高，需要大家自己自己體會(huì)和理解。
相關(guān)文章
本文利用實(shí)例代碼詳細(xì)介紹了一些Three.js中的幾何形狀的實(shí)現(xiàn)過程，包括立方體、平面與球體，有需要的朋友們可以學(xué)習(xí)下。2016-08-08
精通JavaScript 糾正 cleanWhitespace函數(shù)
這個(gè)函數(shù)用在火狐(firefox)上面老是出錯(cuò)，今天仔細(xì)研究了下，改正了，希望別人不要遇到我這樣的問題2010-03-03
這篇文章主要介紹了node.js中的socket.io入門實(shí)例,并對(duì)websocket等反向ajax技術(shù)做了介紹,需要的朋友可以參考下2014-04-04
這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
JS日程管理插件FullCalendar簡(jiǎn)單實(shí)例
JS日程管理插件FullCalendar是一款基于jQuery的日歷日程插件，適用于各種日程安排、工作計(jì)劃等場(chǎng)景，您可以很方便的查看查看待辦事項(xiàng)，標(biāo)記重要事項(xiàng)以及綁定點(diǎn)擊和拖動(dòng)事件，能快速的整合到您的項(xiàng)目中，本文將簡(jiǎn)單介紹FullCalendar的使用2017-02-02
Highcharts 是一個(gè)用純JavaScript編寫的一個(gè)圖表庫, 能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。下面通過本文的介紹及實(shí)例一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
Three.js學(xué)習(xí)之Lamber材質(zhì)和Phong材質(zhì)
本篇將介紹基本材質(zhì)以及兩種基于光照模型的材質(zhì)（Lamber與Phong），有需要的小伙伴們可以參考學(xué)習(xí)。2016-08-08
FullCalendar是一款基于jQuery的日歷插件，適用于各種日程安排、工作計(jì)劃等場(chǎng)景，本文是fullCalendar官方文檔的中文版，主要介紹了fullCalendar的具體屬性與方法，大家可以參考一下2017-02-02
使用RequireJS庫加載JavaScript模塊的實(shí)例教程
RequireJS庫的主旨就是一個(gè)js文件的模塊加載器,可以獨(dú)立于框架來進(jìn)行使用,這里我們整理了使用RequireJS庫加載JavaScript模塊的實(shí)例教程,需要的朋友可以參考下2016-06-06
Three.js學(xué)習(xí)之文字形狀及自定義形狀
今天小編帶大家學(xué)習(xí)的是Three.js的文字形狀與自定義形狀，文章內(nèi)容很詳細(xì)，對(duì)大家學(xué)習(xí)Three.js或許有幫助，下面一起來看看吧。2016-08-08