高图-多轴图形不显示标签

Highcharts - Multiple Axis Graph not displaying labels

本文关键字:显示 标签 图形 高图      更新时间:2023-09-26

我正在尝试使用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提琴:http://jsfiddle.net/9MrYd/1/

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

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

或使用linkedTo参数:

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

http://api.highcharts.com/highcharts yAxis.linkedTohttp://api.highcharts.com/highcharts series.yAxis