当前位置：首页 > 资讯 > 技术文档

Highcharts学习之坐标轴

时间：2020-06-22 04:40 编辑：来源：阅读：
扫一扫，手机访问

摘要：Highcharts学习之坐标轴

[b]前言[/b] 所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置[code]chart.inverted = true [/code]可以让x，y轴显示位置对调。下面一起来学习学习Highcharts的坐标轴。 [b]tags:[/b] [b][img]http://files.jb51.net/file_images/article/201608/201682172445987.png?20167217250[/img] [/b] [b]1.标题[/b]

xAxis:{
  title:{
    text:'x轴标题'
  }
}
yAxis:{
  title:{
    text:'y轴标题'
  }
}

[b]2.标签[/b] [b]labels:enabled、formatter、setp[/b]

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  //间隔几个线显示一次
        }

[b][img]http://files.jb51.net/file_images/article/201608/201682172615908.png?201672172631[/img] [/b] [b]3.网格[/b] [b]1.gridLineWidth[/b] 网格线宽度。x轴默认为0，y轴默认为1px。 [b]2.gridLineColor [/b] 网格线颜色。默认为[b]：#C0C0C0[/b]。 [b]3.gridLineDashStyle [/b] 网格线线条样式。和Css border-style类似，常用的有：[b]Solid、Dot、Dash[/b]。

yAxis:{
 //gridLineWidth:'1px',  //注意如果使用了这个属性gridLineDashStyle会不起作用
 gridLineColor:'#019000',
 gridLineDashStyle:'Dash',
}

[img]http://files.jb51.net/file_images/article/201608/201682172741515.png?201672172752[/img] [b]4.类型[/b]

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

[b]5.reversed[/b] 倒置是将轴翻转而不是x、y对调。例如y轴倒置的结果是y轴是从最大的值开始的，最小值反而在最下方

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

[b][img]http://files.jb51.net/file_images/article/201608/201682172901015.png?201672172911[/img] [/b] [b]6.opposite[/b] 当其值设置为true时，x轴和y轴显示的位置分别上下，左右对调。

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

[b][img]http://files.jb51.net/file_images/article/201608/201682173009009.png?201672173022[/img] [/b] [b]7.inverted[/b]

chart:{
        type:'line',
        style:{
          fontSize:"17px",
        },
        inverted:true
      }

[img]http://files.jb51.net/file_images/article/201608/201682173107295.png?201672173117[/img] [b]8.min、max[/b] 控制数轴的最小值和最大值。 [b]注意：[/b]控制[b]allowDecimals、min、max [/b]属性你可以轻松控制数轴的显示范围等（这也是很常见的问题） [b]总结[/b] 以上就是本文的全部内容了，大家学会了吗？小编还会继续更新Highcharts的文章，对Highcharts感兴趣的朋友们要继续关注编程素材网，希望本文给大家学习带来的帮助。

全部评论(0)

上一篇：fullCalendar中文API官方文档
下一篇：require.js深入了解 require.js特性介绍

资讯排行榜
更多>>