<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<style type="text/css">
html, body, form {
margin:0px;
padding:0px;
background-color:#808080;
}
#container {
height:100%;
width:100%;
position:absolute;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/plugins/highcharts-zh_CN.js"></script>
<div id="container"></div>
<script type="text/javascript">
$.getJSON('https://data.jianshukeji.com/stock/history/000001', function (data) {
//var t01 = Date.parse(new Date("2017-09-10 09:30:00".replace(/-/g, "/"))) / 1000;
//var t02 = Date.parse(new Date("2017-09-10 10:00:00".replace(/-/g, "/"))) / 1000;
//var t03 = Date.parse(new Date("2017-09-10 10:30:00".replace(/-/g, "/"))) / 1000;
//var t04 = Date.parse(new Date("2017-09-10 11:00:00".replace(/-/g, "/"))) / 1000;
//var t05 = Date.parse(new Date("2017-09-10 11:30:00".replace(/-/g, "/"))) / 1000;
//var t06 = Date.parse(new Date("2017-09-10 13:00:00".replace(/-/g, "/"))) / 1000;
//var t07 = Date.parse(new Date("2017-09-10 13:30:00".replace(/-/g, "/"))) / 1000;
//var t08 = Date.parse(new Date("2017-09-10 14:00:00".replace(/-/g, "/"))) / 1000;
//var t09 = Date.parse(new Date("2017-09-10 14:30:00".replace(/-/g, "/"))) / 1000;
//var t10 = Date.parse(new Date("2017-09-10 15:00:00".replace(/-/g, "/"))) / 1000;
var t01 = Date.UTC(2017, 09, 10, 09, 30, 00);
var t02 = Date.UTC(2017, 09, 10, 10, 00, 00);
var t03 = Date.UTC(2017, 09, 10, 10, 30, 00);
var t04 = Date.UTC(2017, 09, 10, 11, 00, 00);
var t05 = Date.UTC(2017, 09, 10, 11, 30, 00);
var t05_1 = Date.UTC(2017, 09, 10, 12, 00, 00);
var t05_2 = Date.UTC(2017, 09, 10, 12, 30, 00);
var t06 = Date.UTC(2017, 09, 10, 13, 00, 00);
var t07 = Date.UTC(2017, 09, 10, 13, 30, 00);
var t08 = Date.UTC(2017, 09, 10, 14, 00, 00);
var t09 = Date.UTC(2017, 09, 10, 14, 30, 00);
var t10 = Date.UTC(2017, 09, 10, 15, 00, 00);
var t11 = Date.UTC(2017, 09, 11, 09, 30, 00);
var t12 = Date.UTC(2017, 09, 11, 10, 00, 00);
var t13 = Date.UTC(2017, 09, 11, 10, 30, 00);
var t14 = Date.UTC(2017, 09, 11, 11, 00, 00);
var t15 = Date.UTC(2017, 09, 11, 11, 30, 00);
var t16 = Date.UTC(2017, 09, 11, 13, 00, 00);
var t17 = Date.UTC(2017, 09, 11, 13, 30, 00);
var t18 = Date.UTC(2017, 09, 11, 14, 00, 00);
var t19 = Date.UTC(2017, 09, 11, 14, 30, 00);
var t20 = Date.UTC(2017, 09, 11, 15, 00, 00);
var t_01 = new Array(t01, 3005);
var t_02 = new Array(t02, 2900);
var t_03 = new Array(t03, 2800);
var t_04 = new Array(t04, 2900);
var t_05 = new Array(t05, 3000);
var t_05_1 = new Array(t05_1, 2900);
var t_05_2 = new Array(t05_2, 2800);
var t_06 = new Array(t06, 3050);
var t_07 = new Array(t07, 3100);
var t_08 = new Array(t08, 3000);
var t_09 = new Array(t09, 2900);
var t_10 = new Array(t10, 4000);
var t_11 = new Array(t11, 2001);
var t_12 = new Array(t12, 2300);
var t_13 = new Array(t13, 3500);
var t_14 = new Array(t14, 2900);
var t_15 = new Array(t15, 2600);
var t_16 = new Array(t16, 2500);
var t_17 = new Array(t17, 2400);
var t_18 = new Array(t18, 2500);
var t_19 = new Array(t19, 2700);
var t_20 = new Array(t20, 2900);
var data = new Array(t_01, t_02, t_03, t_04, t_05, /*t_05_1, t_05_2,*/ t_06, t_07, t_08, t_09, t_10, t_11, t_12, t_13, t_14, t_15, t_16, t_17, t_18, t_19, t_20);
//Highcharts.setOptions({
// global: {
// useUTC: false
// }
//});
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
//title: {
// text: 'xxxxxxx',
// style: {
// color: '#f00',
// font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
// }
//},
///图表配置
chart: {
backgroundColor: '#000000',
polar: true, //当设置为 true 时，直线图、曲线图、面积图、柱状图等笛卡尔图会转成极地图。极地图需要额外的引入 highcharts-more.js才 能使用。
type: 'line',
style: {
fontFamily: 'monospace',
color: "#f00"
}
},
//选择器的字体颜色
rangeSelector: {
labelStyle: { color: "#0000ff;" }
},
plotOptions: {
series: {
showInLegend: false,
enableMouseTracking: true,
color: '#ffffff',
dashStyle: 'solid',
lineWidth: 1,
states: {
hover: {
enabled: true,
halo: {
opacity:0,
size:0
},
lineWidth: 1
}
},
// 区域改变线的颜色
//zones: [{
// value: 5,
// color: '#f7a35c',
// fillColor: '#f7a35c'
//}, {
// value: 10,
// color: '#7cb5ec',
// fillColor: '#7cb5ec'
//}, {
// color: '#90ed7d',
// fillColor: '#90ed7d'
//}],
marker: {
enabled: false,
symbol: 'circle',/*"circle", "square", "diamond", "triangle","triangle-down"*/
radius: 1,
states: {
hover: {
enabled: true,/*true*/
radius: 1,/*undefined*/
//backgroundColor: "#ff0000",
//color:"#009900",
fillColor: '#FF0000',/*null*/
//lineWidth: 1,/*0*/
//lineColor: '#ffffff'/*#ffffff*/,
//lineWidthPlus:1,/*1*/
//radiusPlus:1 /*2*/
},
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
},
},
//dataLabels: {
// color: '#0000ff',
// enabled: true,
// style: {
// textShadow: ''
// }
//},
tooltip: {
backgroundColor: '#FCFFC5', // 背景颜色
//borderColor: 'black', // 边框颜色
//borderRadius: 10, // 边框圆角
//borderWidth: 3, // 边框宽度
//shadow: false, // 是否显示阴影
//animation: true, // 是否启用动画效果
//style: { // 文字内容相关样式
// color: "#ff0000",
// fontSize: "12px",
// fontWeight: "blod",
// fontFamily: "Courir new"
//}
},
yAxis: {
gridLineWidth: 0.5,
gridLineDashStyle: 'ShortDash',
gridLineColor:"#ff0000",
crosshair: {
width: 1,
dashStyle: 'Solid',
color: '#ffffff',
zIndex:0,
},
labels: {
style: {
color: '#00ff00',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#00ff00',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
xAxis: [{
gridLineWidth: 0,
/*categories:['9:30','10:00','10:30','11:00','11:30'],*/
crosshair: {
width: 1,
dashStyle: 'solid',
color: '#ffffff',
zIndex: 0,
},
labels: {
enabled: true,
style: {
color: '#00ff00',
font: '11px Trebuchet MS, Verdana, sans-serif'
},
formatter: function () {
// var test = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.value);
var returnTime = Highcharts.dateFormat('%H:%M ', this.value);
if (returnTime == "11:30 ") {
return "11:30/13:00";
}
return returnTime;
},
},
tickPositioner: function () {
var test = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
var last_dataTime = Date.UTC(2017, 09, 10, 09, 30, 00);
var am_startTime=new Date(last_dataTime);
am_startTime.setHours(9, 30, 0, 0);
var am_startTimeUTC=Number(Date.UTC(am_startTime.getFullYear(),am_startTime.getMonth(),am_startTime.getDate(),am_startTime.getHours(),am_startTime.getMinutes()));
var am_midTime=new Date(last_dataTime);
am_midTime.setHours(10, 30, 0, 0);
var am_midTimeUTC=Number(Date.UTC(am_midTime.getFullYear(),am_midTime.getMonth(),am_midTime.getDate(),am_midTime.getHours(),am_midTime.getMinutes()));
var am_lastTime=new Date(last_dataTime);
am_lastTime.setHours(11, 30, 0, 0);
var am_lastTimeUTC=Number(Date.UTC(am_lastTime.getFullYear(),am_lastTime.getMonth(),am_lastTime.getDate(),am_lastTime.getHours(),am_lastTime.getMinutes()));
var pm_startTime=new Date(last_dataTime);
pm_startTime.setHours(13, 1, 0, 0);
var pm_startTimeUTC=Number(Date.UTC(pm_startTime.getFullYear(),pm_startTime.getMonth(),pm_startTime.getDate(),pm_startTime.getHours(),pm_startTime.getMinutes()));
var pm_midTime=new Date(last_dataTime);
pm_midTime.setHours(14, 0, 0, 0);
var pm_midTimeUTC=Number(Date.UTC(pm_midTime.getFullYear(),pm_midTime.getMonth(),pm_midTime.getDate(),pm_midTime.getHours(),pm_midTime.getMinutes()));
var pm_lastTime=new Date(last_dataTime);
pm_lastTime.setHours(15, 0, 0, 0);
var pm_lastTimeUTC=Number(Date.UTC(pm_lastTime.getFullYear(),pm_lastTime.getMonth(),pm_lastTime.getDate(),pm_lastTime.getHours(),pm_lastTime.getMinutes()));
var positions=[am_startTimeUTC,am_midTimeUTC,am_lastTimeUTC,pm_midTimeUTC,pm_lastTimeUTC];
return positions;
},
title: {
style: {
color: '#00ff00',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
}/*, {
linkedTo: 0,
gridLineWidth: 1
}*/],
series: [{
type: 'line',
id: '000001',
name: 'TMS',
/*gapSize: 5,*/
data: data
}],
navigator: {
maskFill: 'rgba(255, 255, 255, 0.45)',
xAxis: {
gridLineWidth: 0,
},
yAxis: {
gridLineWidth: 0,
reversed: false //导航器是否反转
}
},
credits: {
enabled: false
},
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号