highcharts属性的配置

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

<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