Question

http://jsbin.com/enotab/39/edit我想在不使用2个x轴的情况下在同一个XAxis上显示2年不同的数据。在这种情况下，我得到以下结果

我希望有一个2系列的叠加图，其中2012系列成为阴影图。这怎么可能？这是我的静态代码：

var mychart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'x'
    },
    title: {
        text: 'Chart Title'
    },
    xAxis: [{
        type: 'datetime',
        minRange: 31 * 24 * 3600000,
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%e %b %y', this.value);
            }
        }
    }],

yAxis: {
    title: {
        text: 'Current Values'
    },
    gridLineColor: 'transparent',
    plotLines: [{
        value: 0,
        color: 'green',
        dashStyle: 'longdashdot',
        width: 1
    }, {
        value: 30,
        color: 'orange',
        dashStyle: 'longdashdot',
        width: 1
    }, {
        value: 60,
        color: 'red',
        dashStyle: 'longdashdot',
        width: 1
    }, {
        value: 80,
        color: 'black',
        dashStyle: 'longdashdot',
        width: 1
    }]
},

tooltip: {
    crosshairs: true,
    shared: true
},

plotOptions: {
    series: {
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, 'rgba(0,0,0,0.1)']
            ]
        },
        lineWidth: 1,
        shadow: false,
        marker: {
            enabled: false,
            states: {
                hover: {
                    enabled: true,
                    radius: 5,
                    fillColor: 'red'
                }
            }
        },
        states: {
            hover: {
                lineWidth: 1
            }
        },
        threshold: null
    } //area
}, //plotoptions

series: [{
    type: 'area',
    //color:'#89a54e',
    color: '#4572a7',
    lineWidth: 0.1,
    name: '2012',
 //   xAxis: 0,
    zIndex: -1,
    pointInterval: 24 * 3600 * 1000,
    pointStart: Date.UTC(2013, 0, 1),
    data: [
        [Date.UTC(2013, 0, 1), 3],
        [Date.UTC(2013, 0, 2), 12],
        [Date.UTC(2013, 0, 3), 30],
        [Date.UTC(2013, 0, 4), 22],
        [Date.UTC(2013, 0, 5), 12],
        [Date.UTC(2013, 0, 8), 13],
        [Date.UTC(2013, 0, 9), 12],
        [Date.UTC(2013, 0, 11), 13],
        [Date.UTC(2013, 0, 12), 22],
        [Date.UTC(2013, 0, 15), 1],
        [Date.UTC(2013, 0, 16), 25],
        [Date.UTC(2013, 0, 18), 43],
        [Date.UTC(2013, 0, 19), 26],
        [Date.UTC(2013, 0, 20), 23],
        [Date.UTC(2013, 0, 21), 12],
        [Date.UTC(2013, 0, 22), 13],
        [Date.UTC(2013, 0, 23), 22],
        [Date.UTC(2013, 0, 24), 1],
        [Date.UTC(2013, 0, 25), 25],
        [Date.UTC(2013, 0, 26), 43],
        [Date.UTC(2013, 0, 27), 26],
        [Date.UTC(2013, 0, 28), 23],

        [Date.UTC(2013, 0, 29), 12],
        [Date.UTC(2013, 0, 30), 13],
        [Date.UTC(2013, 0, 31), 22],
        [Date.UTC(2013, 1, 1), 1],
        [Date.UTC(2013, 1, 2), -5],
        [Date.UTC(2013, 1, 3), 43],
        [Date.UTC(2013, 1, 4), 26],
        [Date.UTC(2013, 1, 5), 23],
        [Date.UTC(2013, 1, 6), 25],
        [Date.UTC(2013, 1, 7), 43],
        [Date.UTC(2013, 1, 8), 26],
        [Date.UTC(2013, 1, 9), 23],
        [Date.UTC(2013, 1, 10), 35],
        [Date.UTC(2013, 1, 11), 38],
        [Date.UTC(2013, 1, 14), 36],
        [Date.UTC(2013, 1, 15), 3],
        [Date.UTC(2013, 1, 16), 55],
        [Date.UTC(2013, 1, 17), 43],
        [Date.UTC(2013, 1, 18), 22],
        [Date.UTC(2013, 1, 19), -3]
    ]

}, {
    type: 'line',
    name: '2013',
    color: '#89a54e',
    lineWidth: 3,
    zIndex: 3,
    //  xAxis:1,
    pointInterval: 24 * 3600 * 1000,
    pointStart: Date.UTC(2012, 0, 1),
    data: [
        [Date.UTC(2012, 0, 1), 13],
        [Date.UTC(2012, 0, 2), 52],
        [Date.UTC(2012, 0, 3), 3],
        [Date.UTC(2012, 0, 4), 12],
        [Date.UTC(2012, 0, 5), 2],
        [Date.UTC(2012, 0, 6), 35],
        [Date.UTC(2012, 0, 7), 12],
        [Date.UTC(2012, 0, 8), 35],
        [Date.UTC(2012, 0, 9), 22],
        [Date.UTC(2012, 0, 11), 3],
        [Date.UTC(2012, 0, 12), 32],
        [Date.UTC(2012, 0, 15), 41],
        [Date.UTC(2012, 0, 16), 45],
        [Date.UTC(2012, 0, 18), 63],
        [Date.UTC(2012, 0, 19), 16],
        [Date.UTC(2012, 0, 20), 83],
        [Date.UTC(2012, 0, 21), 1],
        [Date.UTC(2012, 0, 22), 75],
        [Date.UTC(2012, 0, 23), 52],
        [Date.UTC(2012, 0, 24), 1],
        [Date.UTC(2012, 0, 25), 65],
        [Date.UTC(2012, 0, 26), 13],
        [Date.UTC(2012, 0, 27), 76],
        [Date.UTC(2012, 0, 28), 56],

        [Date.UTC(2012, 0, 29), 12],
        [Date.UTC(2012, 0, 30), 13],
        [Date.UTC(2012, 0, 31), 22],
        [Date.UTC(2012, 1, 1), 1],
        [Date.UTC(2012, 1, 2), 25],
        [Date.UTC(2012, 1, 3), 43],
        [Date.UTC(2012, 1, 4), 26],
        [Date.UTC(2012, 1, 5), 23],
        [Date.UTC(2012, 1, 6), 25],
        [Date.UTC(2012, 1, 7), 43],
        [Date.UTC(2012, 1, 8), 26],
        [Date.UTC(2012, 1, 9), 23],
        [Date.UTC(2012, 1, 10), 35],
        [Date.UTC(2012, 1, 11), 48],
        [Date.UTC(2012, 1, 14), 86],
        [Date.UTC(2012, 1, 15), 73],
        [Date.UTC(2012, 1, 16), 55],
        [Date.UTC(2012, 1, 17), 43],
        [Date.UTC(2012, 1, 18), 22],
        [Date.UTC(2012, 1, 19), -3]
    ]
}]
});
});

Answer 1

这取决于您想要在x轴上显示的内容。如果您只想保留第一个轴标签，那么只需从第二个x轴上移除标签并将其偏移到第一个轴上：

xAxis:[ {type: 'datetime', minRange:31*24 *3600000 , offset:10,
         labels: {formatter: function() {return Highcharts.dateFormat('%e %b', this.value);
        }
    } },
    {type: 'datetime', minRange:31*24 *3600000 , offset:10,
       labels: {enabled:false}
    }],

使用相同的xAxis highcharts显示具有不同启动间隔的两个不同系列

1 个答案: