Highcharts 实现双X轴

我就是我 2022-09-23 14:46 188阅读 0赞

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]
                        }]
                    });
                });
    });