美文网首页
HighCharts设置滚动条

HighCharts设置滚动条

作者: 小蜗牛的碎碎步 | 来源:发表于2021-09-16 16:10 被阅读0次

    场景:x轴数据过多,出现滚动条

    1. 引入stock文件
    import Highcharts from "highcharts";
    import highstock from 'highcharts/modules/stock'
    highstock(Highcharts);
    
    1. 设置滚动条属性
    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)",
          }
    })
    
    1. 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
    1. 滚动时,y轴自动适配,为了更直观的展示数据,highCharts会根据当前显示在页面上的数据,自动调整y轴刻度,如果不希望自适应,可以设置y轴的最大最小值:
     yAxis: {
            min : Math.min(...dataLists.map(o => o.y)),// 数据的最小值
            max : Math.max(...dataLists.map(o => o.y)),// 数据的最大值
            }
    

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

    相关文章

      网友评论

          本文标题:HighCharts设置滚动条

          本文链接:https://www.haomeiwen.com/subject/uovrgltx.html