解决 Highcharts 中 yAxis 的 max 设置无效的问题

WrBug 发布于2019-08-29 16:21 / 1696人阅读

摘要：问题场景通过上图我们可以发现，即使在中将设置成了，但是最终生成的图表仍然以作为轴的最大值解决方案为了解决这个问题，我们需要为同时添加刻度总数属性这样子就能看到正确的以作为轴最大值的结果了就目前的测试结果而言，所设置的最大值要能够被刻度线划分

问题场景

    $(function () {
        Highcharts.chart("container", {
            title: {
                text: "line"
            },
            xAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            },
            yAxis: {
                max: 350,
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }]
        });
    });

通过上图我们可以发现，即使在 yAxis 中将 max 设置成了350，但是最终生成的图表仍然以400作为y轴的最大值

解决方案

为了解决这个问题，我们需要为 yAxis 同时添加 tickAmount(刻度总数) 属性

    $(function () {
        Highcharts.chart("container", {
            title: {
                text: "line"
            },
            xAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            },
            yAxis: {
                max: 350,
                tickAmount:8,
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }]
        });
    });

这样子就能看到正确的以350作为y轴最大值的结果了

就目前的测试结果而言，max 所设置的最大值要能够被刻度线划分出来的间隔数以特定的值整除

以上面的例子而言 tickAmount 设置为8，划分出了7个格子，350 / 7 = 50 ，可以正确的显示

在其他例子的测试中，整除成70或者90，也遇到过失效的情况

所以还是需要根据具体的 max 值来调整 tickAmount 的设置

解决方案2

还可以使用 tickPositioner 属性来手动设置坐标轴刻度

    $(function () {
        Highcharts.chart("container", {
            title: {
                text: "line"
            },
            xAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            },
            yAxis: {
                tickPositioner: function () {
                    var positions = [0,100,200,300,350];
                    return positions;
                }
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }]
        });
    });

你也可以使用函数自动计算出合适的间隙

    $(function () {
        $("#container").highcharts({
            title: {
                text: "line"
            },
            xAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            },
            yAxis: {
                tickPositioner: function () {
                    var positions = [],
                        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;
                }
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 250.4, 294.1, 95.6, 54.4]
            }],
        });
    });

最后一个 350 为了与上方保持一致 push 进去的，使用时根据实际情况调整计算函数即可

参考

tickAmount API
tickPositioner API

idc机房托管混合云解决问题的方法云计算解决的问题短视频问题的解决措施数据分析解决的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113693.html

解决 Highcharts 中 yAxis 的 max 设置无效的问题

摘要：问题场景通过上图我们可以发现，即使在中将设置成了，但是最终生成的图表仍然以作为轴的最大值解决方案为了解决这个问题，我们需要为同时添加刻度总数属性这样子就能看到正确的以作为轴最大值的结果了就目前的测试结果而言，所设置的最大值要能够被刻度线划分问题场景 showImg(https://segmentfault.com/img/bVbe6UL?w=848&h=447); $(fun...

Cciradih 2019-08-23 10:53 评论0 收藏0
解决 Highcharts 中 yAxis 的 max 设置无效的问题

摘要：问题场景通过上图我们可以发现，即使在中将设置成了，但是最终生成的图表仍然以作为轴的最大值解决方案为了解决这个问题，我们需要为同时添加刻度总数属性这样子就能看到正确的以作为轴最大值的结果了就目前的测试结果而言，所设置的最大值要能够被刻度线划分问题场景 showImg(https://segmentfault.com/img/bVbe6UL?w=848&h=447); $(fun...

curlyCheng 2019-08-02 11:13 评论0 收藏0
ECharts折线图多个折线每次只显示一条

摘要：问题一个折线图中有多条折线。通过设置为与后，对轴进行复用，并每次只展示一条折线，这样能够较好的展示每个折线的变化趋势与大致范围，不过一次看不了多个折线的参考文章文档配置项文档折线图多条折线的时候怎么控制每次只能限制条问题一个折线图中有多条折线。由于折线之间数值范围相差较大（折线A范围[0-50]，折线B范围[10000-20000]……），如果用单Y轴来表示，折线的变化趋势不明显。...

_DangJin 2019-08-21 16:46 评论0 收藏0
highcharts 在angular中的使用

摘要：网址安装依赖引入依赖注入依赖实例哈哈哈一月二月三月四月五月六月七月八月九月十月十一月十二月温度东京纽约柏林伦敦结果基本组成网址 https://segmentfault.com/q/10...https://www.hcharts.cn/demo/h...https://github.com/pablojim/h... 安装依赖 npm install highcharts-ng -...

izhuhaodev 2019-08-22 11:11 评论0 收藏0