Highcharts学习之坐标轴

前端技术 2023/09/06 JavaScript

前言

所有的图表除了饼图都有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

控制数轴的最小值和最大值。

注意：控制allowDecimals、min、max 属性你可以轻松控制数轴的显示范围等（这也是很常见的问题）

总结

以上就是本文的全部内容了，大家学会了吗？小编还会继续更新Highcharts的文章，对Highcharts感兴趣的朋友们要继续关注phpstudy，希望本文给大家学习带来的帮助。

本文地址：https://www.stayed.cn/item/16835

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案