Highchart：末尾无关的 YAxis 比例

Question

当最大值超过 80 时，Highchart 在末尾添加不相关的 y 轴刻度。

            $(function() {
                function draw() {
                    if ($('div[data-sectionId="8766"] .chart .highcharts-container').length > 0) return;
                    $('div[data-sectionId="8766"] .chart').highcharts({
                        chart: {
                            style: {
                                fontFamily: 'AgendaW01-Medium',
                                fontSize: '8pt'
                            },
                            height: 90,
                            backgroundColor: 'rgba(255,255,255,0)',
                            spacing: [0, 5, 5, 0],
                            type: 'bar',
                        },
                        xAxis: [{
                            categories: ['3%', '96%', '2%'],
                            labels: {
                                style: {
                                    fontFamily: 'AgendaW01-Medium',
                                    fontSize: '8pt',
                                    color: '#000000'
                                }
                            },
                            tickLength: 0
                        }, {
                            categories: ['Europe ex UK', 'UK', 'Money Market'],
                            labels: {
                                align: 'left',
                                x: 0,
                                step: 1,
                                style: {
                                    fontFamily: 'AgendaW01-Medium',
                                    fontSize: '8pt',
                                    color: '#000000'
                                }
                            },
                            offset: 250,
                            tickLength: 0
                        }],
                        yAxis: {
                            gridLineColor: '#7f7f7f',
                            title: {
                                text: ''
                            },
                            plotLines: [{
                                value: 0,
                                color: '#7f7f7f',
                                width: 1,
                                zIndex: 10
                            }],
                            labels: {
                                style: {
                                    fontFamily: 'AgendaW01-Medium',
                                    fontSize: '8pt',
                                    color: '#7f7f7f'
                                },
                                overflow: 'justify',
                                format: '{value}%',
                                y: 8
                            }
                        },
                        plotOptions: {
                            bar: {
                                animation: false,
                                color: '#375789',
                                dataLabels: {
                                    enabled: false
                                },
                                states: {
                                    hover: {
                                        enabled: false
                                    }
                                }
                            },
                            series: {
                                pointWidth: 20,
                                stacking: 'normal',
                                pointPadding: 0.1,
                                groupPadding: 0
                            }
                        },
                        series: [{
                            data: [3, 96, 2]
                        }, {
                            xAxis: 1,
                            data: [0, 0, 0]
                        }],
                        title: {
                            text: ''
                        },
                        credits: {
                            enabled: false
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            enabled: false
                        }
                    });
                };
                if ($('div[data-sectionId="8766"]').closest('.tab').length == 0) {
                    draw();
                    return;
                }
                var containingTab = $('div[data-sectionId="8766"]').closest('.tab');
                var containingTabs = $(containingTab).closest('.tabs');
                containingTabs.tabs('onChange', containingTab.index(), function() {
                    draw();
                });
            });

在所附示例中，比例 110% 是我们没有预料到的。有没有人知道如何删除它。只有当最大值超过 80% 时才会出现此附加比例。

我们不想设置最大值，原因如下 1. 最大值是动态的，有5-6%的情况，将最大值设置为固定值并不好。 2.我们不希望将最大值设置为与数据最大值相同。

谢谢，萨拉斯

Answer 1

您可以使用 highcharts() 函数的回调参数来检查 yAxis 的最大生成值是否大于 100。如果是，则将其设置为 100，否则什么都不做：

$('div[data-sectionId="8766"] .chart').highcharts({
    /* ... */
}, function (chart) {
    if (chart.yAxis[0].getExtremes().max > 100) {
        chart.yAxis[0].update({
            max: 100
        });
    }
});

在此处查看有效的 JSFiddle（数据最大值等于 99）：http://jsfiddle.net/qa1hv5bq/2/

Answer 2

在 yAxis 上设置一个 maxPadding 为 0。

yAxis:{
   maxPadding:0
}

Highchart：末尾无关的 YAxis 比例

Highchart: Irrelevent YAxis Scale at the end

scale

highcharts