highcharts双Y轴，设置最大值（max,ceiling）不生效

最新推荐文章于 2023-08-31 16:45:08 发布

pugongyingyangyue

最新推荐文章于 2023-08-31 16:45:08 发布

阅读量2.7k

点赞数 2

本文详细介绍了如何在Highcharts图表中配置双Y轴，包括设置不同的刻度范围、手动指定刻度位置以及自动计算刻度间隔的方法，旨在帮助开发者解决在数据可视化过程中遇到的Y轴显示问题。

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

$(function () {
   $('#container').highcharts({
       xAxis: {
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },
       yAxis: [{
           // tickAmount:6
       }, {
           max: 100,
           min: 0,
           show: true,
           opposite: true
       }],
       series: [{
           name: '1',
           type: 'spline',
           yAxis: 0,
           data: [1,3]
       }, {
           name: '2',
           type: 'spline',
           yAxis: 1,
           data: [100, 100]
       }]
   });
});

解决方法1：添加min属性

解决方法2：为 yAxis 同时添加 tickAmount(刻度总数) 属性

解决方法3：使用 tickPositioner 属性来手动设置坐标轴刻度

yAxis: {
                tickPositioner: function () {
                    var positions = [0,100,200,300,350];
                    return positions;
                }

解决方法4：使用函数自动计算出合适的间隙

            tick = Math.floor(this.dataMin),
                        increment = Math.ceil((this.dataMax - this.dataMin) / 6);
                    for (tick; tick - increment <= this.dataMax; tick += increment) {
                        positions.push(tick);
                    }
                    positions.push(350);
                    return positions;
                }