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)文章
精通JavaScript 糾正 cleanWhitespace函數(shù)
這個(gè)函數(shù)用在火狐(firefox)上面老是出錯(cuò),今天仔細(xì)研究了下,改正了,希望別人不要遇到我這樣的問題2010-03-03Three.js學(xué)習(xí)之Lamber材質(zhì)和Phong材質(zhì)
本篇將介紹基本材質(zhì)以及兩種基于光照模型的材質(zhì)(Lamber與Phong),有需要的小伙伴們可以參考學(xué)習(xí)。2016-08-08淺談JavaScript前端開發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)
以AngularJS為代表的MVVM結(jié)構(gòu)框架或庫這兩年來在前端界真是火到不行,大有對(duì)抗傳統(tǒng)jQuery綁定思想的趨勢(shì),這里我們結(jié)合傳統(tǒng)的MVC結(jié)構(gòu),來淺談JavaScript前端開發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)2016-06-06Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置,如果說 Highcharts 是靈活多變,細(xì)節(jié)可定制的話,那么數(shù)據(jù)列配置就是這個(gè)重要特性的核心。2016-08-08基于d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖
本文用實(shí)例演示如何用d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-08-08