Highcharts 实现双X轴

最新推荐文章于 2022-09-28 19:32:34 发布

wb54979

最新推荐文章于 2022-09-28 19:32:34 发布

阅读量3.5k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/wangbo54979/article/details/51967445

版权

javascript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

var chart;
$(function () {
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container'
                    },
                    title: {
                        text: '正标题'
                    },
                    subtitle: {
                        text: 'Source: www.stepday.com'
                    },
                    //这里配置了多个X轴
                    xAxis: [{
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        title: {
                            text: '月份',
                            style: {
                                color: '#89A54E'
                            }
                        }
                    }, {
                        categories: ['X', 'Y', 'Z', 'W', 'V', 'I',
                    'J', 'K', 'L', 'M', 'N', 'O'],
                        title: {
                            text: '字母',
                            style: {
                                color: '#89A54E'
                            }
                        },
                        opposite: true //对立面 表示显示在上方   不写默认显示在底部 
                    }],
                    yAxis: [{
                        labels: {
                            formatter: function () {
                                return this.value + '°C';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: 'Temperature',
                            style: {
                                color: '#89A54E'
                            }
                        }
                    }],
                    tooltip: {
                        formatter: function () {
                            return '' +
                        this.x + ': ' + this.y +
                        (this.series.name == 'Rainfall' ? ' mm' : '°C');
                        }
                    },
                    credits: {
                       text:"www.stepday.com",
                       href:'http://www.stepday.com/myblog/?highcharts'
                    },                  
                    series: [{
                        name: 'Rainfall',
                        color: '#4572A7',
                        type: 'column',
                        xAxis: 1,//第二个X轴
                        data: [-30, -40, 0, -129.2, -144.0, -176.0, -35.6, -48.5, -16.4, -94.1, -5.6, -4.4]

                    }, {
                        name: 'Temperature',
                        color: '#89A54E',
                        type: 'column',
                        data: [0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }]
                });
            });
});