android时间轴折线图,不规律时间轴平移缩放折线图 | JShare

不规律时间轴平移缩放折线图 | JShare

var chart = null;

var OldInterval = 3;

$(function () {

Highcharts.setOptions({

lang: {

resetZoom: "返回",

resetZoomTitle: "回到初始状态"

}

});

$('#container').highcharts({

chart: {

zoomType: 'x',

panning: true,

panKey: 'ctrl',

events: {

//监听图表区域选择事件

selection: function () {

//动态修改

//DynamicChangeTickInterval(1);

}

}

},

title: {

text: null

},

xAxis: {

type: 'datetime',

labels: {

formatter :function() {

console.log(this);

return Highcharts.dateFormat(this.isFirst?'%Y-%m-%d %H:%M:%S':'%H:%M:%S', this.value);

}

}

},

yAxis: [{

title: {

text: 'Users Over Time'

},

},{

title: {

text: 'Hits Over Time'

},

opposite: true

}],

// 数据提示框日期格式化的方法：

tooltip: {

shared: true,

valueSuffix: '',

borderWidth: 1,

borderColor: '#999',

crosshairs: {

width: 1,

color: '#cccccc'

},

formatter: function() {

var s = '' + Highcharts.dateFormat('%Y/%m/%d %H:%M:%S', this.x) + '';

$.each(this.points, function () {

s += '

' + this.series.name + ': ' +this.y+'';

});

return s;

}

},

plotOptions: {

area: {

lineWidth: 1,

fillOpacity: 0.3,

marker: {

lineWidth: 1,

lineColor: '#ffffff',

symbol: 'circle'

}

}

},

legend: {

itemStyle: {

"color": "#000000",

"fontFamily": "微软雅黑"

}

},

series: [{

type: 'line',

name: 'Users',

pointInterval: 1000,

pointStart: Date.UTC(2016, 0, 1),

marker: {

enabled: false

},

data: [

0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,

0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,

0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269

]

},{

type: 'line',

yAxis:1,

name: 'Hits',

pointInterval: 1000,

pointStart: Date.UTC(2016, 0, 1),

marker: {

enabled: false

},

data: [

0.7869, 0.7837, 0.7827, 0.7825, 0.7779, 0.7791, 0.779, 0.7787, 0.78, 0.7807,

0.7803, 0.7817, 0.7799, 0.7799, 0.7795, 0.7801, 0.7765, 0.7725, 0.7683, 0.7641,

0.7639, 0.7616, 0.7608, 0.759, 0.7582, 0.7539, 0.75, 0.75, 0.7507, 0.7505

]

}]

});

//ExtendHighcharts();

});

//动态修改xAxis的刻度间隔值

function DynamicChangeTickInterval(interval) {

chart.xAxis[0].update({

tickInterval: interval

});

}

//扩展或者重写Highcharts图表组件的方法

function ExtendHighcharts() {

Highcharts.extend(Highcharts.Chart.prototype, { zoomOut: function () {

//还原图表X轴的间隔

DynamicChangeTickInterval(OldInterval);

//还原图表初始状态

this.zoom();

}

});

}

{"resource":"1,3","options":null,"code":{"code":"JYEya1","name":"不规律时间轴平移缩放折线图","version":0,"doctype":0,"description":"","meta":null,"newGroup":1297,"group":{"id":1297,"name":"highcharts","code":"jamky"}}}