Question

我正在尝试使用Highcharts库创建一个多轴图表。我可以让Sentiment轴正确显示它的标签，但响应数（适用）轴不显示任何文本标签。

我正在使用的代码是：

$(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小提琴：http://jsfiddle.net/9MrYd/1/

Answer 1

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

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

Highcharts - 多轴图表不显示标签

1 个答案: