在highcharts中是否可能有两个图表，共享相同的x轴，但彼此相邻

Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?

本文关键字：共享 可能有 是否 highcharts 两个      更新时间：2023-09-26

我发现了这个:

http://jsfiddle.net/tungwaiyip/F3pts/6/

但那不是我想要的。我需要一些类似的东西，但图表共享x轴。

        top: 300;

上面的yAxis设置在y轴上有效果，但在x轴上我看不到任何类似的设置。

是否有可能在highcharts中有2个图表，共享相同的x轴，但彼此相邻?

这是我的小提琴:http://jsfiddle.net/PcWSu/

与xAxis相同的属性(top, left, width, height)，参见:http://jsfiddle.net/F3pts/7/

xAxis: [{
    gridLineWidth: 1,
    width :150
}, {
    offset: 0,
    gridLineWidth: 1,
    width :150,
    left: 230
}],

您可以在这里看到具有多个X和Y轴的共享工具提示。希望这对你有帮助。

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Shared tooltip chart'
        },
        xAxis: [{
            type: 'datetime',
            id: 'x1'
        }, {
            type: 'datetime',
            id: 'x2',
            opposite: true
        }],
        yAxis: {
            min: 0
        },
        tooltip: {
            shared: true,
            useHTML: true,
            formatter: function () {
                var tooltip = '';
                var i, len;
                tooltip += '<small>Apple</small>';
                tooltip += '<table>';
                for (i = 0, len = 4; i < len; i++) {
                        if(this.points[i] != undefined){
                if(this.points[i].series.name.indexOf('Apple') >= 0){
                    tooltip += '<tr>';
                    tooltip += '<td style="color: ' + this.points[i].series.color + '">'u25CF</td>';
                    tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
                    tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
                    tooltip += '</tr>';
                    }
                    }
                }
                tooltip += '</table>';
                tooltip += '<small>Mango</small>';
                tooltip += '<table>';
                for (i = 0, len = 4; i < len; i++) {
                        if(this.points[i] != undefined){
                if(this.points[i].series.name.indexOf('Mango') >= 0){
                    tooltip += '<tr>';
                    tooltip += '<td style="color: ' + this.points[i].series.color + '">'u25CF</td>';
                    tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
                    tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
                    tooltip += '</tr>';
                    }
                    }
                }
                tooltip += '</table>';
                return tooltip;
            }
        },
        series: [{
            name: 'Apple',
            id: 'series1',
            xAxis: 'x1',
            color: 'rgba(255, 0, 0, 1.0)',
            data: [5, 3, 4, 7, 6, 1, 0],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 10)
        }, {
            name: 'Apple New',
            id: 'series2',
            //linkedTo: 'series1',
            xAxis: 'x2',
            color: 'rgba(255, 180, 180, 1.0)',
            data: [4, 5, 5, 6, 1, 3, 4],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 17)
        },{
            name: 'Mango',
            id: 'series3',
            xAxis: 'x1',
            color: 'rgba(255, 0, 0, 1.0)',
            data: [15, 13, 14, 17, 16, 11, 10],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 10)
        }, {
            name: 'Mango New',
            id: 'series4',
            //linkedTo: 'series1',
            xAxis: 'x2',
            color: 'rgba(255, 180, 180, 1.0)',
            data: [14, 15, 15, 16, 11, 13, 14],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 17)
        }]
    });
});
相关文章：