Highcharts學(xué)習(xí)之坐標(biāo)軸

更新時(shí)間：2016年08月02日 17:32:34 投稿：daisy

今天講交互圖表Highcharts的坐標(biāo)軸，我們將對(duì)Highcharts圖表的坐標(biāo)軸組成、坐標(biāo)軸類型等進(jìn)行詳細(xì)系統(tǒng)講解。下面一起來(lái)看看。

前言

所有的圖表除了餅圖都有X軸和Y軸，默認(rèn)情況下，x軸顯示在圖表的底部，y軸顯示在左側(cè)（多個(gè)y軸時(shí)可以是顯示在左右兩側(cè)），通過(guò)設(shè)置chart.inverted = true 可以讓x，y軸顯示位置對(duì)調(diào)。

下面一起來(lái)學(xué)習(xí)學(xué)習(xí)Highcharts的坐標(biāo)軸。

tags:

1.標(biāo)題

xAxis:{
  title:{
    text:'x軸標(biāo)題'
  }
}
yAxis:{
  title:{
    text:'y軸標(biāo)題'
  }
}

2.標(biāo)簽

labels:enabled、formatter、setp

yAxis:{
        labels:{
         enabled:true,
         formatter:function(){
           if(this.value <=3) {
             return "第一等級(jí)("+this.value+")";
           }else if(this.value >3 && this.value <=5) {
             return "第二等級(jí)("+this.value+")";
           }else {
             return "第三等級(jí)("+this.value+")";
           }
         },
         step:1  //間隔幾個(gè)線顯示一次
        }

3.網(wǎng)格

1.gridLineWidth

網(wǎng)格線寬度。x軸默認(rèn)為0，y軸默認(rèn)為1px。

2.gridLineColor

網(wǎng)格線顏色。默認(rèn)為：#C0C0C0。

3.gridLineDashStyle

網(wǎng)格線線條樣式。和Css border-style類似，常用的有：Solid、Dot、Dash。

yAxis:{
 //gridLineWidth:'1px',  //注意如果使用了這個(gè)屬性gridLineDashStyle會(huì)不起作用
 gridLineColor:'#019000',
 gridLineDashStyle:'Dash',
}

4.類型

xAxis:{
   categories:['A','B','C']
  },
yAxis:{
   type:'datetime'
  },

5.reversed

倒置是將軸翻轉(zhuǎn)而不是x、y對(duì)調(diào)。例如y軸倒置的結(jié)果是y軸是從最大的值開始的，最小值反而在最下方

xAxis:{
        categories:['A','B','C'],
        reversed:true
      },
      yAxis:{
        type:'datetime',
        reversed:true
      },

6.opposite

當(dāng)其值設(shè)置為true時(shí)，x軸和y軸顯示的位置分別上下，左右對(duì)調(diào)。

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ù)軸的顯示范圍等（這也是很常見的問題）

總結(jié)

以上就是本文的全部?jī)?nèi)容了，大家學(xué)會(huì)了嗎？小編還會(huì)繼續(xù)更新Highcharts的文章，對(duì)Highcharts感興趣的朋友們要繼續(xù)關(guān)注腳本之家，希望本文給大家學(xué)習(xí)帶來(lái)的幫助。

您可能感興趣的文章:

highcharts

相關(guān)文章

Three.js學(xué)習(xí)之正交投影照相機(jī)
本篇主要介紹照相機(jī)中的正交投影照相機(jī)。學(xué)習(xí)Three.js的小伙伴們可以參考學(xué)習(xí)。
2016-08-08
交互式可視化js庫(kù)gojs使用介紹及技巧
這篇文章主要介紹了如何使用可視化庫(kù)gojs及使用時(shí)的小技巧，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2022-01-01
Highcharts入門之簡(jiǎn)介
Highcharts 是一個(gè)用純JavaScript編寫的一個(gè)圖表庫(kù), 能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用。下面通過(guò)本文的介紹及實(shí)例一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
2016-08-08
組件庫(kù)Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解
這篇文章主要為大家介紹了組件庫(kù)Monmrepo架構(gòu)與開發(fā)調(diào)試環(huán)境構(gòu)建詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
fullCalendar中文API官方文檔
FullCalendar是一款基于jQuery的日歷插件，適用于各種日程安排、工作計(jì)劃等場(chǎng)景，本文是fullCalendar官方文檔的中文版，主要介紹了fullCalendar的具體屬性與方法，大家可以參考一下
2017-02-02
Three.js學(xué)習(xí)之幾何形狀
本文利用實(shí)例代碼詳細(xì)介紹了一些Three.js中的幾何形狀的實(shí)現(xiàn)過(guò)程，包括立方體、平面與球體，有需要的朋友們可以學(xué)習(xí)下。
2016-08-08
使用RequireJS庫(kù)加載JavaScript模塊的實(shí)例教程
RequireJS庫(kù)的主旨就是一個(gè)js文件的模塊加載器,可以獨(dú)立于框架來(lái)進(jìn)行使用,這里我們整理了使用RequireJS庫(kù)加載JavaScript模塊的實(shí)例教程,需要的朋友可以參考下
2016-06-06
Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說(shuō) Highcharts 是靈活多變，細(xì)節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個(gè)重要特性的核心。
2016-08-08
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
ThinkJS中如何使用MongoDB的CURD操作
最近因?yàn)樾难獊?lái)潮想要試試thinkJS操作mongoDB，去官方文檔看了看，默認(rèn)是只給了mysql的配置，源代碼也是沒有配置mongo的，只有一個(gè)官方案例，無(wú)奈只能自己學(xué)習(xí)了，下面是自己的一些學(xué)習(xí)總結(jié)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-12-12