HighCharts设置滚动条

场景：x轴数据过多，出现滚动条

1. 引入stock文件

import Highcharts from "highcharts";
import highstock from 'highcharts/modules/stock'
highstock(Highcharts);

2. 设置滚动条属性

new Highcharts.Chart({
xAxis: {
  max:30,// x轴多于30个出现滚动条
},
scrollbar:{// 设置滚动条样式
        enabled: true,
        height: 8,
        barBackgroundColor: "#d1d1d1",
        barBorderColor: "#d1d1d1",
        rifleColor: "#d1d1d1",
        barBorderRadius: 5,
        buttonBorderWidth: 0,
        buttonArrowColor: "rgba(0,0,0,0)",
      }
})

3. x轴label文案过长时，倾斜比出现省略号

 chart: {
       marginBottom:100,// 底边距
       marginRight：100，// 右边距
      },
  xAxis: {
          max: 30,
          labels: {
            autoRotationLimit: 100,// 设置倾斜的点
            autoRotation: [45], // 向右倾斜45度，默认为[-45]
          }
        },

marginBottom：图表的下边距，默认为100，需要根据图表的高度设置合适的值，否则有可能会出现文字未省略，直接被截断的情况，如下图：

Xnip2021-09-16_15-38-57.jpg

marginRight：图表的右边距，默认为100，如果右倾斜，也可能会出现文字被截断，见下图：需要根据业务需求动态设置该值

Xnip2021-09-16_15-48-22.jpg

左倾斜可以避免上述情况：

Xnip2021-09-16_15-51-36.jpg

4. 滚动时，y轴自动适配，为了更直观的展示数据，highCharts会根据当前显示在页面上的数据，自动调整y轴刻度，如果不希望自适应，可以设置y轴的最大最小值：

 yAxis: {
        min : Math.min(...dataLists.map(o => o.y)),// 数据的最小值
        max : Math.max(...dataLists.map(o => o.y)),// 数据的最大值
        }

适用场景：图表有最大、最小值标示线，页面滚动可能会导致标示线丢失