Highcharts - 多轴图表无法显示标签

Question

我正在尝试使用Highcharts库创建多轴图表。我可以正确显示情感轴的标签，但是“响应数量（适用）”轴没有显示任何文本标签。

我使用的代码是：

$(document).ready(function(e) {

        var perShapeGradient = {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        };

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'GraphContainer',
                height: 275,
                marginTop: 30
            },
            colors: 
            [
                {
                    linearGradient: perShapeGradient,
                    stops: 
                    [
                        [0, 'rgba(186, 186, 186, 1)'],
                        [1, 'rgba(232, 232, 232, 0.8)']
                    ]
                }
            ],
            title: {
                text: null
            },
            plotOptions: {
                line: {
                    lineWidth: 1,
                    marker: {
                        radius: 6,
                        fillColor: '#fff',
                        lineColor: '#e10019',
                        lineWidth: 1.5,
                        states:
                        {
                            hover:
                            {
                                radius: 8,
                                fillColor: '#e10019',
                                lineColor: '#fff',
                                lineWidth: 2
                            }
                        }
                    }
                }
            },
            xAxis: {
                categories: ['13 May', '20 May'],
                title: 'Week Commencing'
            },
            yAxis: [{
                labels: {
                    endOnTick: true,
                    formatter: function() {
                        return this.value + '%';
                    },
                    style: {
                        color: '#e10019',
                        fontSize: 10
                    }
                },
                title: {
                    text: '% rated as 4 or 5',
                    rotation: 270,
                    offset: 75,
                    style: {
                        color: '#f49fa8',
                        fontSize: 11,
                        fontWeight: 'normal'
                    }
                },
                max: 100,
                opposite: true
            }, {
                gridLineWidth: 0,
                title: {
                    text: 'Number of responses',
                    style: {
                        color: '#888',
                        fontSize: 11,
                        fontWeight: 'normal'
                    }
                },
                labels: {
                    formatter: function() 
                    {
                        x = this.value.toString();
                        var pattern = /(-?\d+)(\d{3})/;
                        while (pattern.test(x))
                            x = x.replace(pattern, "$1,$2");
                        return x;
                    },
                    style: {
                        color: '#888',
                        fontSize: 10
                    }
                }

            }],
            tooltip: {
                formatter: function() {

                    var unit = {
                    'Applicable': '',
                    'Sentiment': '%'
                    }[this.series.name];

                    return 'Week Commencing ' + this.x +': '+ this.y +' '+ unit;

                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Applicable',
                type: 'column',
                data: [307, 200]
            }, {
                color: '#e10019',
                name: 'Sentiment',
                type: 'line',
                data: [44.3, 20]
            }]
        });

    });

我还创建了一个JS Fiddle：http://jsfiddle.net/9MrYd/1/

（说明：此句为原文，无需翻译）

- ajtrichards

---

在撰写关于此问题的问题时，我发现了这个解决方法。我遇到了同样的问题，除了当我调整窗口大小时，次级轴标签会出现，即使只有一个像素。如果有人偶然发现这个问题，并且对该行为有解释，我很想了解为什么会发生这种情况。顺便说一下，yAxis.linkedTo和series.yAxis属性都解决了我的问题，而在我的情况下使用yAxis.linkedTo更有意义。 - zigzag

Answer 1

它不显示任何值，因为yAxis没有设置linked参数或没有系列链接到该yAxis。您需要为第一或第二个系列设置yAxis参数。

http://jsfiddle.net/9MrYd/4/

或者使用linkedTo参数：

http://jsfiddle.net/9MrYd/5/

http://api.highcharts.com/highcharts#yAxis.linkedTo http://api.highcharts.com/highcharts#series.yAxis

- Sebastian Bochan

---

在我的情况下，我的系列中确实有yaxis参考，但我在yaxis标签中添加了“steps”。一旦我将其删除，我的标签就显示出来了。 - Neelam