在highcharts中移动x轴(刻度线,标签和线)

时间:2013-12-02 14:10:31

标签: javascript jquery highcharts

是否可以在高图中移动x轴的y位置?到目前为止,我只能使用

将其移动到我的图表的顶部或底部
opposite: true/false

但现在我需要它在我的图形中间,以固定的y值。我目前的代码是

$(function () {
var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            type: 'spline',
            renderTo: 'container'
        },
        title: {
            text: 'Title'
        },
        xAxis: {
            opposite: true,
            min: 0,
            max: 4,
            reversed: true,
            startOnTick: true,
            endOnTick: true,
            lineWidth: 1
        },
        yAxis: {
            labels: {
                enabled: true
            },
            title: null,
            gridLineWidth: 0,
            min: 1,
            max: 3.1
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            marker: {
                enabled: false
            },
            name: 'Year 1800',
            data: [
                [1, 1],
                [2.5, 1]
            ],
            showInLegend: false
        }, {
            marker: {
                enabled: false
            },
            name: 'Year 1900',
            data: [
                [1.5, 2],
                [3, 2]
            ],
            showInLegend: false
        }, {
            name: 'name1',
            data: [
                [2, 3]
            ],
            type: 'scatter',
            zindex: 10
        }, {
            name: 'name2',
            data: [
                [3, 3]
            ],
            type: 'scatter'
        }, {
            name: 'name3',
            data: [
                [1.5, 3]
            ],
            type: 'scatter'
        }]
    });
});
});

我的JSfiddle是http://jsfiddle.net/5xum/fVpqU/7/

我希望x轴(以及刻度线和标签)在两个不同的数据集之间运行y = 2.5。 HighCharts支持这个吗?

2 个答案:

答案 0 :(得分:3)

您可以使用offset属性移动xAxis。在您的情况下,您必须使用负偏移量来移动xAxis:

    xAxis: {
                opposite: true,
                min: 0,
                max: 4,
                reversed: true,
                startOnTick: true,
                endOnTick: true,
                lineWidth: 1,
                offset: -130
            },

答案 1 :(得分:-2)



$(function () {
Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

$('#container').highcharts({
    chart: {
      type: 'bar'
	  
    },
		
		title: {
			text : <%=jtitle%>
		},
				

		xAxis      : { 
            min:Date.UTC(2016, 0, 0),
            max:Date.UTC(2016, 11, 1),
            //allowDecimals: false,
            type           : 'datetime',
            tickInterval   : 24 * 3600 * 1000*30, //one day
            labels         : {
                rotation : 0
            },
            
        },
	     yAxis: {
      
        dateTimeLabelFormats: { 
            day: '%Y'  },
        labels :{
            formatter:function() {return  Highcharts.dateFormat('%Y',this.value);}
        },
        title: {
            text: 'Date'
        },
        plotLines: [{
            value: 0,
            width: 5,
            color: '#808080'
        }]
    },  
		
		series : [
		{
			name : 'MB Data',
			data : <%=datasp%>,
			tooltip: {
			valueDecimals: 2,
		dateTimeLabelFormats: {
				hour: '%H:%M'
			}
			}
		},
	  {
			name : 'Date & Time',
		   data : <%=datetime%>
	  },

		
		]
	});
});
&#13;
&#13;
&#13;