Highcharts學習之坐標軸
更新時間：2016年08月02日 17:32:34 投稿：daisy
今天講交互圖表Highcharts的坐標軸，我們將對Highcharts圖表的坐標軸組成、坐標軸類型等進行詳細系統(tǒng)講解。下面一起來看看。
前言
所有的圖表除了餅圖都有X軸和Y軸，默認情況下，x軸顯示在圖表的底部，y軸顯示在左側（多個y軸時可以是顯示在左右兩側），通過設置chart.inverted = true 可以讓x，y軸顯示位置對調。
下面一起來學習學習Highcharts的坐標軸。
tags:
1.標題
xAxis:{
title:{
text:'x軸標題'
}
}
yAxis:{
title:{
text:'y軸標題'
}
}
2.標簽
labels:enabled、formatter、setp
yAxis:{
labels:{
enabled:true,
formatter:function(){
if(this.value <=3) {
return "第一等級("+this.value+")";
}else if(this.value >3 && this.value <=5) {
return "第二等級("+this.value+")";
}else {
return "第三等級("+this.value+")";
}
},
step:1 //間隔幾個線顯示一次
}
3.網格
1.gridLineWidth
網格線寬度。x軸默認為0，y軸默認為1px。
2.gridLineColor
網格線顏色。默認為：#C0C0C0。
3.gridLineDashStyle
網格線線條樣式。和Css border-style類似，常用的有：Solid、Dot、Dash。
yAxis:{
//gridLineWidth:'1px', //注意如果使用了這個屬性gridLineDashStyle會不起作用
gridLineColor:'#019000',
gridLineDashStyle:'Dash',
}
4.類型
xAxis:{
categories:['A','B','C']
},
yAxis:{
type:'datetime'
},
5.reversed
倒置是將軸翻轉而不是x、y對調。例如y軸倒置的結果是y軸是從最大的值開始的，最小值反而在最下方
xAxis:{
categories:['A','B','C'],
reversed:true
},
yAxis:{
type:'datetime',
reversed:true
},
6.opposite
當其值設置為true時，x軸和y軸顯示的位置分別上下，左右對調。
xAxis:{
categories:['A','B','C'],
opposite:true
},
yAxis:{
type:'datetime',
opposite:true
}
7.inverted
chart:{
type:'line',
style:{
fontSize:"17px",
},
inverted:true
}
8.min、max
控制數(shù)軸的最小值和最大值。
注意：控制allowDecimals、min、max 屬性你可以輕松控制數(shù)軸的顯示范圍等（這也是很常見的問題）
總結
以上就是本文的全部內容了，大家學會了嗎？小編還會繼續(xù)更新Highcharts的文章，對Highcharts感興趣的朋友們要繼續(xù)關注腳本之家，希望本文給大家學習帶來的幫助。
相關文章
這篇文章主要介紹了require.js深入了解,require.js特性介紹,本文講解了require.js和CommonJS的兼容、CDN回退、循環(huán)依賴、BaseUrl、JSONP等內容,需要的朋友可以參考下2014-09-09
Highcharts是一個用純JavaScript編寫的一個圖表庫，之前小編發(fā)了一篇介紹Highcharts的文章，那么本文將進一步的介紹Highcharts的基本屬性，有需要的可以參考學習。2016-08-08
使用RequireJS庫加載JavaScript模塊的實例教程
RequireJS庫的主旨就是一個js文件的模塊加載器,可以獨立于框架來進行使用,這里我們整理了使用RequireJS庫加載JavaScript模塊的實例教程,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了node.js中的socket.io入門實例,并對websocket等反向ajax技術做了介紹,需要的朋友可以參考下2014-04-04
本篇主要介紹照相機中的正交投影照相機。學習Three.js的小伙伴們可以參考學習。2016-08-08
數(shù)據列配置是 Highcharts 最復雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細節(jié)可定制的話，那么數(shù)據列配置就是這個重要特性的核心。2016-08-08
本篇將介紹基本材質以及兩種基于光照模型的材質（Lamber與Phong），有需要的小伙伴們可以參考學習。2016-08-08
JS日程管理插件FullCalendar是一款基于jQuery的日歷日程插件，適用于各種日程安排、工作計劃等場景，您可以很方便的查看查看待辦事項，標記重要事項以及綁定點擊和拖動事件，能快速的整合到您的項目中，本文將簡單介紹FullCalendar的使用2017-02-02
JS日程管理插件FullCalendar提供了豐富的屬性設置和方法調用，開發(fā)者可以根據FullCalendar提供的API快速完成一個日歷日程的開發(fā)，本文將FullCalendar的常用屬性和方法、回調函數(shù)等整理成中文文檔，以供參閱。2017-02-02
FullCalendar是一款基于jQuery的日歷插件，適用于各種日程安排、工作計劃等場景，本文是fullCalendar官方文檔的中文版，主要介紹了fullCalendar的具體屬性與方法，大家可以參考一下2017-02-02