javascript – Highcharts – 多轴图表不显示标签

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Highcharts – 多轴图表不显示标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1947字，纯文字阅读大概需要3分钟。

内容图文

我正在尝试使用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/

解决方法:

它不显示任何值,因为没有为yAxis设置链接参数或没有系列链接到此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

内容总结

以上是互联网集市为您收集整理的javascript – Highcharts – 多轴图表不显示标签全部内容，希望文章能够帮你解决javascript – Highcharts – 多轴图表不显示标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端