单个series:
Highcharts.chart('container1', {
chart: {
animation: false,
type: 'spline',
marginRight: 10,
events: {
load: function () {
var series = this.series[0],
chart = this;
setInterval(function () {
var x = (new Date()).getTime(), // 当前时间
y = Math.random() * (2 - (0)) + (0);//2和0分别对应随机数据的最大最小值
series.addPoint([x, y], true, true);
}, 1000);
}
},
zoomType: 'x',
backgroundColor: "rgba(41,41,41,0.3)",
},
boost: {
useGPUTranslations: true
},
title: {
text: '10-min Mean Wind Speed 10分鐘平均風速',
style: {
color: "white"
}
},
// subtitle: {
// text: 'Using the Boost module'
// },
yAxis: {
gridLineDashStyle: 'Dash',
title: {
text: "Wind Speed 風速(m/s)",
style: {
fontSize: '16px'
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
gridLineDashStyle: 'Dash',
gridLineWidth: 1,
title: {
text: "Time 時間",
style: {
fontSize: '16px'
}
}
},
plotOptions: {
series: {
animation: false
}
},
tooltip: {
valueDecimals: 2
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: false,
},
series: [{
color: 'red',
data: (function () {
// 生成随机值
var data = [],
i;
for (i = -500; i <= 0; i += 1) {
data.push({
x: (new Date()).getTime() + i * 9000,
y: Math.random() * (2.5 - (0)) + (0)
});
}
return data;
}())
}]
});
多个series:
Highcharts.chart('container8', {
chart: {
plotBorderWidth: 1,
plotBorderColor: 'white',
zoomType: 'x',
backgroundColor: "rgba(41,41,41,0.3)",
type: 'spline',
Animation: false,
marginRight: 10,
events: {
load: function () {
let series = this.series[0];
let series1 = this.series[1];
let series2 = this.series[2];
let series3 = this.series[3];
chart = this;
setInterval(function () {
let x = (new Date()).getTime(), // 当前时间
y = Math.random() * (200 - (-200)) + (-200);
y1 = Math.random() * (200 - (-200)) + (-200);
y2 = Math.random() * (200 - (-200)) + (-200);
y3 = Math.random() * (200 - (-200)) + (-200);
series.addPoint([x, y], true, true);
series1.addPoint([x, y1], true, true);
series2.addPoint([x, y2], true, true);
series3.addPoint([x, y3], true, true);
}, 1000);
}
}
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Transversal Displacement竪向位移',
style: {
color: "white"
}
},
// subtitle: {
// text: 'Using the Boost module'
// },
yAxis: {
gridLineDashStyle: 'Dash',
title: {
text: "Displacement 位移(mm)",
style: {
fontSize: '16px'
}
},
},
xAxis: {
gridLineDashStyle: 'Dash',
gridLineWidth: 1,
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
title: {
text: "Time 時間",
style: {
fontSize: '16px'
}
},
},
tooltip: {
valueDecimals: 2
},
legend: {
enabled: true,
floating: true,
y: -130,
align: "center"
},
series: [{
name: "GPS1",
color: "red",
data: (function () {
// 生成随机值
let data = [],
i;
for (i = -100; i <= 0; i += 1) {
data.push({
x: (new Date()).getTime() + i * 9000,
y: Math.random() * (200 - (-200)) + (-200)
});
}
return data;
}())
},
{
name: "GPS2",
color: "green",
data: (function () {
// 生成随机值
let data1 = [],
i;
for (i = -100; i <= 0; i += 1) {
data1.push({
x: (new Date()).getTime() + i * 9000,
y: Math.random() * (200 - (-200)) + (-200)
});
}
return data1;
}())
}, {
name: "GPS3",
color: "blue",
data: (function () {
// 生成随机值
let data2 = [],
i;
for (i = -100; i <= 0; i += 1) {
data2.push({
x: (new Date()).getTime() + i * 9000,
y: Math.random() * (200 - (-200)) + (-200)
});
}
return data2;
}())
}, {
name: "GPS4",
color: "pink",
data: (function () {
// 生成随机值
let data3 = [],
i;
for (i = -100; i <= 0; i += 1) {
data3.push({
x: (new Date()).getTime() + i * 9000,
y: Math.random() * (200 - (-200)) + (-200)
});
}
return data3;
}())
}]
});
//交互类型的
function formatDateTime(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
h = h < 10 ? ('0' + h) : h;
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}
//将标准时间转化为时间戳
function timeToTimestamp(time){
let timestamp = Date.parse(new Date(time).toString());
//timestamp = timestamp / 1000; //时间戳为13位需除1000，时间戳为13位的话不需除1000
console.log(time + "的时间戳为：" + timestamp);
return timestamp;
//2021-11-18 22:14:24的时间戳为：1637244864707
}
function getFormatDate_XLSX(serial) {
var utc_days = Math.floor(serial - 25569);
var utc_value = utc_days * 86400;
var date_info = new Date(utc_value * 1000);
var fractional_day = serial - Math.floor(serial) + 0.0000001;
var total_seconds = Math.floor(86400 * fractional_day);
var seconds = total_seconds % 60;
total_seconds -= seconds;
var hours = Math.floor(total_seconds / (60 * 60));
var minutes = Math.floor(total_seconds / 60) % 60;
var d = new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds);
/*//得到Date()对象后，便可进行日期格式化了！
var add0 = (m) => m < 10 ? '0' + m : m;
var d = getFormatDate_XLSX(44358.9999884259);
var YYYY = d.getFullYear();
var MM = add0(d.getMonth() + 1);
var DD = add0(d.getDate());
var hh = add0(d.getHours());
var mm = add0(d.getMinutes());
var ss = add0(d.getSeconds());
return `${YYYY}-${MM}-${DD} ${hh}:${mm}:${ss}`;
*/
return timeToTimestamp(formatDateTime(d));
}
$.ajax({
type:"GET",
url:'../../static/json/qx.json',
success:function(data){
//定义一个数组
browsers = [],
//迭代，把异步获取的数据放到数组中
$.each(data,function(i,d){
console.log(i)
let a=[];let b=[];
for (let j = 0; j < d.length ; j++) {
a[j]=getFormatDate_XLSX(d[j].RECORD_TIME);
// a[j]=a[j].substring(11,16);
b[j]=parseFloat(d[j].AIR_TEMPERATURE.toFixed(2));
browsers.push([a[j],b[j]]);
console.log( a[j])
console.log(typeof b[j])
// browsers.push([a[j].RECORD_TIME,d[j].AIR_TEMPERATURE])
// browsers.push([ getFormatDate_XLSX(d[j].RECORD_TIME),d[j].AIR_TEMPERATURE])
}
console.log(browsers)
console.log(d)
});
//设置数据
chart_1.series[0].setData(browsers);
},
error:function(e){
alert(e);
}
});
var chart_1= Highcharts.chart('container1', {
chart: {
plotBorderWidth: 1,
plotBorderColor: 'white',
zoomType: 'x',
backgroundColor: "rgba(41,41,41,0.3)",
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Real Time Temperature實時溫度',
style:{
color:"white"
}
},
// subtitle: {
// text: 'Using the Boost module'
// },
yAxis:{
gridLineDashStyle:'Dash',
title:{
text:" Temperature 溫度(℃)",
style: {
fontSize:"16px"
}
},
},
xAxis: {
type: 'datetime',
labels:{
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
},
// dateTimeLabelFormats: {
// day: '%H:%M'
// },
gridLineDashStyle:'Dash',
gridLineWidth:1,
title:{
text:"Time 時間",
style: {
fontSize:"16px"
}
},
},
credits:{
enabled:false
},
exporting:{
enabled:false
},
tooltip: {
valueDecimals: 2
},
legend: {
enabled: false,
},
series: [{
color:"red",
}],
responsive: {
rules: [{
condition: {
maxWidth: 2000
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
