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％，将max设置为固定值也不会很好。 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量表

2 个答案: