highcharts属性的配置

本文详细介绍了Highcharts图表中x轴的配置属性,包括max、showLastLabel、min、showFirstLabel、label的steps、staggerLines和tickInterval等。通过实例展示了这些属性如何影响横坐标标签的显示,如标签间隔、行数和最大最小值设定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个从官网粘贴的简单代码示例:

<div class="main">
    <div id="container" style="min-width:400px;height:400px"></div>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
     <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
     <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
     <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script>
       let chart = Highcharts.chart('container', {
          chart: {
              type: 'line'
          },
          title: {
              text: '月平均气温'
          },
          subtitle: {
              text: '数据来源: WorldClimate.com'
          },
          xAxis: {
              categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
              title: {
                  text: '气温 (°C)'
              }
          },
          plotOptions: {
              line: {
                  dataLabels: {
                      // 开启数据标签
                      enabled: true          
                  },
                  // 关闭鼠标跟踪,对应的提示框、点击事件会失效
                  enableMouseTracking: false
              }
          },
          series: [{
              name: '东京',
              data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }],
          credits: { //去掉版权logo
            enabled: false
          },
      });
    </script>
</div>

这是在官网获取的最简单的图表样式,具体呈现为以下:

图1

 

横坐标xAxis:

     max:

     坐标轴的最大值。当设置为 null 时,最大值将会自动计算。当 endOnTick 参数值为 true 时,max 值将会向上取整。

     其实就是显示到什么位置,正常情况下是categories的值的数组长度-1,就是显示全部数据(图1);但如果将max改为10(长度-2),就会是这样:

图2

 

     showLastLabel:

     是否显示坐标轴的最后一个标签。 默认是:true。当showLastLabel为false时:

图3

 

min:

坐标轴的最小值,当为 null 是最小值将自动计算。如果设置了 startOnTick 为 true 时,最小值可能会进行向下取整。

       与max类似,min的取值决定了横坐标显示多少个值:

图4

 

     showFirstLabel:

     是否显示坐标轴的第一个标签 默认是:true。当showFirstLabel为false时:

图5

lable的steps:

labels: {
   step: 1 
}

      显示  n 的倍数标签,例如设置为 2 则表示标签间隔一个轴标签显示。默认情况下,为了避免轴标签被覆盖,该参数会根据情况自动计算。可以通过设置此参数为 1 来阻止自动计算。

      意思就是隔几个显示横坐标,如果设置step为2:

图6

 

      lable的 staggerLines:

       只针对水平轴有效,定义轴标签显示行数。设置这个值为4:可以看到标签分别展示在了四行

       

图7

 

 

 

 

   tickInterval:

     官网文档没有翻译,但大概意思是 以轴为单位的刻度线的间隔。在我的理解下是跟lable的step作用一样的,但是不排除复杂图表下显示不同,毕竟没有必要有两个显示相同的属性。设置tickInterval为3时:

图7

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值