我正在研究实时图表,我需要预先定义的x轴为9:30,10:00,10:30,11:00,11:30,12:00,12:30 < / p>
它将Db中的数据分别作为[x,y]值和图表上的addpoint。像数据[10:24,350]必须正确地指向图表。
$(function () {
//end = (new Date()).getTime() + 100000;
$.getJSON('/Charts/Get/Home.aspx', function (data) {
var d = new Date();
var o = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
var p = new Date(o).getTime();
Highcharts.stockChart('chartContainer', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
requestData(series);
}, 60000);
}
}
},
scrollbar: {
enabled: false
},
xAxis: {
tickInterval: 3600 * 1000,
min: min.getUTCDate(),
max: Date.UTC(2016, 12, 19),
type: 'datetime',
startOnTick: false,
endOnTick: false,
ordinal: false,
dateTimeLabelFormats: {
day: '%M'
}
},
navigator: { enabled: false },
title: {
text: 'Interactive Chart'
},
exporting:{
enabled: false
},
rangeSelector: {
enabled: false
},
series: [{
name: '',
type: 'line',
data: data,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
}]
});
});
});[1]
答案 0 :(得分:0)
today = new Date();
dd = today.getUTCDate();
mm = today.getUTCMonth() + 1;
yyyy = today.getUTCFullYear();
min = yyyy + '-' + mm + '-' + dd + ' 15:00:00';
max = yyyy + '-' + mm + '-' + dd + ' 18:00:00';
d = new Date(Date.parse(min));
m = d.getTime();
e = new Date(Date.parse(max));
n = e.getTime()
var chart; // global
function requestData(series) {
$.ajax({
url: '/Charts/Get/Home.aspx?r=upd',
success: function (point) {
point = $.parseJSON(point)
shift = series.data.length > 20; // shift if the series is
series.addPoint(point, true, shift);
},
cache: false
});
}
$(function () {
$.getJSON('/Charts/Get/Home.aspx', function (data) {
Highcharts.stockChart('chartContainer', {
chart: {
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
requestData(series);
}, 60000);
}
}
},
xAxis: {
type: 'datetime',
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
startOnTick: false,
endOnTick: false,
ordinal: false,
min:m,
max:n,
dateTimeLabelFormats: {
minute: '%H:%M'
}
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
title: {
text: ' '
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: '',
type: 'line',
data: data,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
}]
});
});
});