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