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

Question

我找到了这个：

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

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

        top: 300;

yAxis 中的上述设置在 y 轴上起到了作用，但我在 x 轴上看不到类似的东西。

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

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

Answer 1

您可以为 xAxis 使用相同的属性（顶部、左侧、宽度、高度），请参阅：http: //jsfiddle.net/F3pts/7/

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

Answer 2

您可以通过这个小提琴，您可以在其中看到具有多个 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)
        }]
    });
});