highstock
$(function () {
$.getJSON('http://www.hcharts.cn/datas/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
}
// create the chart
$('#container').highcharts('StockChart', {
tooltip:{enabled:false},
navigator :{enabled:false},
scrollbar :{enabled:false},
credits :{enabled:false},
exporting :{enabled:false},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '100%',
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
$(function () {
$.getJSON('http://www.hcharts.cn/datas/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
}
// create the chart
$('#container').highcharts('StockChart', {
tooltip:{enabled:false},
navigator :{enabled:false},
scrollbar :{enabled:false},
credits :{enabled:false},
exporting :{enabled:false},
rangeSelector: {
// enabled: false
},
chart: {
backgroundColor: '#FFFFFF',
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '100%',
lineWidth: 0
}],
xAxis: [{
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
//仿钱龙股票主题 供学习交流、免费使用 by 宽宽 2016-05-15
//整理中
$(function () {
//数据来源 上海证券交易所
$.getJSON('http://yunhq.sse.com.cn:32041/v1/sh1/dayk/000001?jsoncallback=?',function(data){
// console.log(data);
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
maset = [5,10,20,30,60,120],
ma = [],
dataLength = data.kline.length,
i = 0; for (i; i < dataLength; i += 1) { var newdate = data.kline[i][0].toString();
var myDate = new Date(newdate.substring(0,4)+'-'+newdate.substring(4,6)+'-'+newdate.substring(6)+' 00:00:00');
xAxisDate = myDate.getTime();
// console.log(xAxisDate);
ohlc.push([
// data.kline[i][0], // the date
xAxisDate,
data.kline[i][1], // open
data.kline[i][2], // high
data.kline[i][3], // low
data.kline[i][4] // close
]);
$.each(maset,function(index,value){
// console.log(index,value);
if(typeof ma['ma'+value] == "undefined"){
ma['ma'+value]=[];
}
if(typeof ma[value+'total'] == "undefined"){
ma[value+'total']=0;
}
if(i<value)
{
ma[value+'total'] += data.kline[i][4]
ma['ma'+value].push([xAxisDate,null]);
} else {
ma[value+'total'] += (data.kline[i][4] - data.kline[i-value][4]);
ma['ma'+value].push([xAxisDate, ma[value+'total']/value]);
}
}); var newColor = data.kline[i][4]>data.kline[i][1]?'#a80000':'#00a800';
volume.push({x: xAxisDate,
y: data.kline[i][5],
color: newColor
}); }
//console.log(ma);
//导入选项
Highcharts.setOptions(Highcharts.option);
//导入主题
Highcharts.setOptions(Highcharts.theme);
$('#container').highcharts('StockChart', { rangeSelector: {
enabled: false
},
exporting: { // 输出功能，需搭建 export server 暂时关闭
enabled: false ,
},
legend:{enabled:false}, title: {
style: {
color: '#dd54fc',
fontWeight: 'bold'
},
text: data.code+" 上证指数"
}, chart: {
//renderTo:'container', },
navigator: {
enabled: true, //false
margin: 2,
height: 17
},
xAxis: {
startOnTick: false,//true,//
endOnTick:true,
minPadding:0,
maxPadding:0,
ordinal: true //false
},
yAxis: [{
minorTickInterval: 'auto',
showLastLabel: true,
showFirstLabel: false,
labels: {
style:
{"color":"#FCFFa5","fontWeight":"bold"},
align: 'right',
x: -3
},
title: 'ohlc',
height: '61.8%',
lineWidth: 0,
opposite: false //true,
},
{
minorTickInterval: 'auto',
labels: {
style:
{"color":"#FCFFa5","fontWeight":"bold"},
align: 'right',
x: -3
},
title: {
text: ''
},
/*Volume*/
top: '61.8%',
height: '38.2%',
offset: 0,
lineWidth: 0,
opposite: false
}],
series: [{
type:'candlestick',
name:'价',
data: ohlc,
dataGrouping: {
enables:false
},
yAxis: 0,
id:'c' },{
type:'line',
name:'ma5' ,
data: ma['ma5'] ,
color: "#fcfc54",
yAxis: 0
},{
type:'line',
name:'ma10' ,
data: ma['ma10'] ,
color: "#dd54fc",
yAxis: 0
},{
type:'line',
name:'ma20' ,
data: ma['ma20'] ,
color: "#54fc54",
yAxis: 0
},{
type:'line',
name:'ma30' ,
data: ma['ma30'] ,
color: "#3f54fc",
yAxis: 0
},
{
animation: false,
type: 'column',
//pointWidth: 3,
name: '量',
data: volume,
dataGrouping: {
enables:false
},
yAxis: 1 }]
},function(c){
var _credits = c.options.credits;
c.credits.on("click",function(){
if(_credits.enabled && _credits.href){
//多选或者更多功能、样式，建议使用Model
if(window.confirm('将要访问 hcharts.cn?')) {
window.open(_credits.href);
} else {
// back
}
}
});
}); } );
});
<div id="container" style="min-width:1100px;height:800px"></div>
<script>
Highcharts.option = ({
global: {
useUTC: false
},
lang: { // 汉化界面
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二月'],
shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二月'],
weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
},
navigator: {
enabled: false //true //
}, scrollbar: {
enabled: false //true //
},
rangeSelector: {
enabled: false
},
exporting: { // 输出功能，需搭建 export server 暂时关闭
enabled: false ,
},
legend:{enabled:false},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0
},
arearange:{
fillOpacity: 0.2,
} ,
line: { //图表线宽 ，spline 另一种线
lineWidth: 1.3,
fillOpacity: 1.1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 1
}
}
},
shadow: false
}, series: { animation: {
enabled: false,
duration: 0
}
},
candlestick: {
lineColor:'green',
color: 'green',
upColor: 'red',
upLineColor: 'red'
}
}
});
</script>
<script> Highcharts.theme = {
//fcfc54 黄 dd54fc 粉 54fc54 嫩绿 3f54fc 深蓝 a8a8a8 灰 00a800 老绿 a80000 深红 fcfcfc 白 54fcfc 青 fc54fc 紫
colors: ["#fcfc54","#dd54fc","#54fc54","#3f54fc","#a8a8a8","#00a800","#a80000","#fcfcfc","#54fcfc","#fc54fc" ],
//colors: ["#514F78", "#42A07B", "#9B5E4A", "#72727F", "#1F949A", "#82914E", "#86777F", "#42A07B"],
chart: {
className: 'stock-qianlong',
borderWidth: 0,
plotShadow: false , //true,
//plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg',
plotBorderColor: '#CC0000',
plotBorderWidth: 3,
plotBackgroundColor: '#000000',
backgroundColor: '#000000',
spacingTop: 10,
spacingBottom: 15,
},
title: {
text: null,
style: {
color: '#3E576F',
font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
subtitle: {
style: {
color: '#6D869F',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
tooltip:{
distance: 140,
// positioner: function () {
// return { x: 80, y: 15 };
// },
backgroundColor: 'rgba(255, 255, 255, 0.8)',
shared:true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table width="100%">',
pointFormat: '<tr><td style="color: {series.color};font-size:14px;">\u25CF</td style="text-align: left"><td>{series.name}: </td>' + '<td style="text-align: right"><b>{point.y} </b></td></tr>',
footerFormat: '</table>',
dateTimeLabelFormats: {minute:'%Y-%m-%d %H:%M'},
crosshairs:[true,true],
followPointer:true, //false //
valueDecimals: 2 //, positioner: function () { return { x: 10, y: 35 }; }
},
credits: {
enabled:true ,
href:"http://www.hcharts.cn",
position: {
align: 'left',
x: 10,
verticalAlign: 'bottom',
y: -2
},
style: { //
cursor: 'pointer',
color: '#009090',
fontSize: '9px'
},
text: ['感谢 hcharts.cn & highcharts.com 提供图表支持']
},
plotOptions: {
arearange:{
fillOpacity: 0.2,
} ,
line: {
lineWidth: 1.3,
fillOpacity: 1.1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 1
}
}
},
shadow: false
},
series: {
animation: {
enabled: false
//duration: 500
}
},
candlestick: {
lineColor:'green',
color: 'green',//'#00a800',
upColor: '#a80000',
upLineColor: '#a80000'
}
},
xAxis: {
gridLineWidth: 1.5,
gridLineColor: 'rgba(255, 0, 0, .5)',
lineColor: '#a80000',
//tickColor: '#C0D0E0',
showFirstLabel: true,
showLastLabel: true,
startOnTick: false,//true,//
endOnTick:false,
minPadding:0,
maxPadding:0,
tickWidth: 2,
tickColor: '#a80000',
tickPosition: 'outside',
type: 'datetime',
dateTimeLabelFormats:{hour: '%H:%M',day: '%e. %b',month: '%b \'%y', year: '%Y'},
lineWidth: 0,
offset: 1,
labels: {
style: {color:"#fcfc54"}
},
title: {
style: {
color: '#666',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
yAxis: {
gridLineColor: 'rgba(255, 0, 0, .5)',
minorGridLineColor: 'rgba(255,0,0,0.3)',
title: {
text: null,
style: {
color: '#666',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#3E576F'
},
itemHoverStyle: {
color: 'black'
},
itemHiddenStyle: {
color: 'silver'
}
},
labels: {
style: {
color: '#3E576F'
}
}
}; </script>
<script>
/**
* Highcharts X-range series plugin
* 此部分为插件，可以另存为js文件，引用之后即可按照正常的线类型使用，type: xrange 即可
*/
(function(H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each,
extendClass = H.extendClass,
Point = H.Point; defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, { tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.yCategory}</b><br/>'
} });/**/
H.seriesTypes.xrange = H.extendClass(columnType, { pointClass: extendClass(Point, {
// Add x2 and yCategory to the available properties for tooltip formats
getLabelConfig: function() {
var cfg = Point.prototype.getLabelConfig.call(this); cfg.x2 = this.x2;
cfg.yCategory = this.yCategory = this.series.yAxis.categories && this.series.yAxis.categories[this.y];
return cfg;
}
}),
/* */
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
requireSorting: false,
animate: H.seriesTypes.line.prototype.animate, /**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function() {
var metrics,
chart = this.chart; function swapAxes() {
each(chart.series, function(s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
} swapAxes(); this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this); swapAxes(); return metrics;
},
translate: function() {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
metrics = series.columnMetrics; H.each(series.points, function(point) {
var barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 4;
point.tooltipPos[1] -= metrics.width / 2;
});
}
}); /**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function(proceed) {
var axis = this,
dataMax = Number.MIN_VALUE; proceed.call(this);
if (this.isXAxis) {
each(this.series, function(series) {
each(series.x2Data || [], function(val) {
if (val > dataMax) {
dataMax = val;
}
});
}); // 这个会影响rangeSelector的效果, 此例中屏蔽
/*
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
*/
}
});
}(Highcharts)); /**
* 插件部分结束
*/
</script>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
var chartss ;
var ohlc = [];
$(function () { //数据来源 上海证券交易所
$.getJSON('http://yunhq.sse.com.cn:32041/v1/sh1/dayk/000001?jsoncallback=?',function(data){
// console.log(data);
// split the data set into ohlc and volume
var volume = [],
maset = [5,10,20,30],
ma = [],
dataLength = data.kline.length,
i = 0; for (i; i < dataLength; i += 1) { var newdate = data.kline[i][0].toString();
var myDate = new Date(newdate.substring(0,4)+'-'+newdate.substring(4,6)+'-'+newdate.substring(6)+' 00:00:00');
xAxisDate = myDate.getTime(); // console.log(xAxisDate);
ohlc.push([
// data.kline[i][0], // the date
xAxisDate,
data.kline[i][1], // open
data.kline[i][2], // high
data.kline[i][3], // low
data.kline[i][4] // close
]);
$.each(maset,function(index,value){
// console.log(index,value);
if(typeof ma['ma'+value] == "undefined"){
ma['ma'+value]=[];
}
if(typeof ma[value+'total'] == "undefined"){
ma[value+'total']=0;
}
if(i<value)
{
ma[value+'total'] += data.kline[i][4]
ma['ma'+value].push([xAxisDate,null]);
} else {
ma[value+'total'] += (data.kline[i][4] - data.kline[i-value][4]);
ma['ma'+value].push([xAxisDate, ma[value+'total']/value]);
}
}); var newColor = data.kline[i][4]>data.kline[i][1]?'#a80000':'#00a800';
volume.push({x: xAxisDate,
y: data.kline[i][5],
color: newColor
}); }
//console.log(ma);
//导入选项
Highcharts.setOptions(Highcharts.option);
//导入主题
Highcharts.setOptions(Highcharts.theme);
$('#container').highcharts('StockChart', { rangeSelector: {
enabled: false
},
exporting: { // 输出功能，需搭建 export server 暂时关闭
enabled: false ,
},
legend:{enabled:false}, title: {
style: {
color: '#dd54fc',
fontWeight: 'bold'
},
text: data.code+" 上证指数"
}, chart: {
//renderTo:'container',
events: {
load: function() { // set up the updating of the chart each second setInterval(function() { }, 1000);
}
} },
navigator: {
enabled: false, //false
margin: 2,
height: 17
},
xAxis: {
startOnTick: false,//true,//
endOnTick:true,
minPadding:0,
maxPadding:0,
ordinal: true //false
},
yAxis: [{
minorTickInterval: 'auto',
showLastLabel: true,
showFirstLabel: false,
labels: {
style:
{"color":"#FCFFa5","fontWeight":"bold"},
align: 'right',
x: -3
},
title: 'ohlc',
height: '100%',
lineWidth: 0,
opposite: false //true,
},
{
minorTickInterval: 'auto',
labels: {
style:
{"color":"#FCFFa5","fontWeight":"bold"},
align: 'right',
x: -3
},
title: {
text: ''
},
/*Volume*/
top: '61.8%',
height: '38.2%',
offset: 0,
lineWidth: 0,
opposite: false
}],
series: [{
type:'candlestick',
name:'价',
data: ohlc,
dataGrouping: {
enables:false
},
yAxis: 0,
id:'c' }
/*
,{
type:'line',
name:'ma5' ,
data: ma['ma5'] ,
color: "#fcfc54",
yAxis: 0
},{
type:'line',
name:'ma10' ,
data: ma['ma10'] ,
color: "#dd54fc",
yAxis: 0
},{
type:'line',
name:'ma20' ,
data: ma['ma20'] ,
color: "#54fc54",
yAxis: 0
},{
type:'line',
name:'ma30' ,
data: ma['ma30'] ,
color: "#3f54fc",
yAxis: 0
}
*/
/*
,
{
animation: false,
type: 'column',
//pointWidth: 3,
name: '量',
data: volume,
dataGrouping: {
enables:false
},
yAxis: 1 }
*/
]
},function(c){ chartss = this ; }); } ); }); </script>
</head>
<body>
<script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
<script src="http://cdn.hcharts.cn/highstock/modules/exporting.js"></script> <div id="container" style="width:800px;height:600px"></div>
<button id="fuck">fuck</button>
<script>
Highcharts.option = ({
global: {
useUTC: false
},
lang: { // 汉化界面
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二月'],
shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二月'],
weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
},
navigator: {
enabled: true //true //
},
scrollbar: {
enabled: true //true //
},
rangeSelector: {
enabled: false
},
exporting: { // 输出功能，需搭建 export server 暂时关闭
enabled: false ,
},
legend:{enabled:false},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
},
columnrange: {
grouping: false,
shadow: false,
borderWidth: 0
},
arearange:{
fillOpacity: 0.2,
} ,
line: { //图表线宽 ，spline 另一种线
lineWidth: 0,
fillOpacity: 1.1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 1
}
}
},
shadow: false
}, series: { animation: {
enabled: false,
duration: 0
}
},
candlestick: {
lineColor:'green',
color: 'green',
upColor: 'red',
upLineColor: 'red'
}
}
});
</script>
<script> Highcharts.theme = {
//fcfc54 黄 dd54fc 粉 54fc54 嫩绿 3f54fc 深蓝 a8a8a8 灰 00a800 老绿 a80000 深红 fcfcfc 白 54fcfc 青 fc54fc 紫
colors: ["#fcfc54","#dd54fc","#54fc54","#3f54fc","#a8a8a8","#00a800","#a80000","#fcfcfc","#54fcfc","#fc54fc" ],
//colors: ["#514F78", "#42A07B", "#9B5E4A", "#72727F", "#1F949A", "#82914E", "#86777F", "#42A07B"],
chart: {
className: 'stock-qianlong',
borderWidth: 0,
plotShadow: false , //true,
//plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg',
plotBorderColor: '#000000',
plotBorderWidth: 10,
plotBackgroundColor: '#000000',
backgroundColor: '#000000',
spacingTop: 10,
spacingBottom: 15,
},
title: {
text: null,
style: {
color: '#3E576F',
font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
subtitle: {
style: {
color: '#6D869F',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
tooltip:{
enabled:false,
distance: 140,
// positioner: function () {
// return { x: 80, y: 15 };
// },
backgroundColor: 'rgba(255, 255, 255, 0.8)',
shared:true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table width="100%">',
pointFormat: '<tr><td style="color: {series.color};font-size:14px;">\u25CF</td style="text-align: left"><td>{series.name}: </td>' + '<td style="text-align: right"><b>{point.y} </b></td></tr>',
footerFormat: '</table>',
dateTimeLabelFormats: {minute:'%Y-%m-%d %H:%M'},
crosshairs:[true,true],
followPointer:true, //false //
valueDecimals: 2 //, positioner: function () { return { x: 10, y: 35 }; }
},
credits: {
enabled:false ,
href:"http://www.9hlh.com",
position: {
align: 'left',
x: 10,
verticalAlign: 'bottom',
y: -2
},
style: { //
cursor: 'pointer',
color: '#009090',
fontSize: '9px'
}
},
plotOptions: {
arearange:{
fillOpacity: 0.2,
} ,
line: {
lineWidth: 0.8,
fillOpacity: 1.1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 1
}
}
},
shadow: false
},
series: {
animation: {
enabled: false
//duration: 500
}
},
candlestick: {
lineColor:'green',
color: 'green',//'#00a800',
upColor: '#a80000',
upLineColor: '#a80000'
}
},
xAxis: {
gridLineWidth: 0,
gridLineColor: 'rgba(255, 0, 0, .5)',
lineColor: '#000000',
//tickColor: '#C0D0E0',
showFirstLabel: true,
showLastLabel: true,
startOnTick: false,//true,//
endOnTick:false,
minPadding:0,
maxPadding:0,
tickWidth: 1,
tickColor: '#a80000',
tickPosition: 'outside',
type: 'datetime',
dateTimeLabelFormats:{hour: '%H:%M',day: '%e. %b',month: '%b \'%y', year: '%Y'},
lineWidth: 0,
offset: 1,
labels: {
style: {color:"#fcfc54"}
},
title: {
style: {
color: '#666',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
yAxis: {
gridLineColor: 'rgba(255, 0, 0, .5)',
minorGridLineColor: 'rgba(255,0,0,0.3)',
title: {
text: null,
style: {
color: '#666',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#3E576F'
},
itemHoverStyle: {
color: 'black'
},
itemHiddenStyle: {
color: 'silver'
}
},
labels: {
style: {
color: '#3E576F'
}
}
}; </script>
<script>
/**
* Highcharts X-range series plugin
* 此部分为插件，可以另存为js文件，引用之后即可按照正常的线类型使用，type: xrange 即可
*/
(function(H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each,
extendClass = H.extendClass,
Point = H.Point; defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, { tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.yCategory}</b><br/>'
} });/**/
H.seriesTypes.xrange = H.extendClass(columnType, { pointClass: extendClass(Point, {
// Add x2 and yCategory to the available properties for tooltip formats
getLabelConfig: function() {
var cfg = Point.prototype.getLabelConfig.call(this); cfg.x2 = this.x2;
cfg.yCategory = this.yCategory = this.series.yAxis.categories && this.series.yAxis.categories[this.y];
return cfg;
}
}),
/* */
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
requireSorting: false,
animate: H.seriesTypes.line.prototype.animate, /**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function() {
var metrics,
chart = this.chart; function swapAxes() {
each(chart.series, function(s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
} swapAxes(); this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this); swapAxes(); return metrics;
},
translate: function() {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
metrics = series.columnMetrics; H.each(series.points, function(point) {
var barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 4;
point.tooltipPos[1] -= metrics.width / 2;
});
}
}); /**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function(proceed) {
var axis = this,
dataMax = Number.MIN_VALUE; proceed.call(this);
if (this.isXAxis) {
each(this.series, function(series) {
each(series.x2Data || [], function(val) {
if (val > dataMax) {
dataMax = val;
}
});
}); // 这个会影响rangeSelector的效果, 此例中屏蔽
/*
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
*/
}
});
}(Highcharts)); /**
* 插件部分结束
*/ $("#fuck").click(function(event) {
//alert("fuck"); console.log(chartss.series[0]);
var begin = 1464710400000 ;
var index = 0 ;
setInterval(function() { ohlc.splice(0,1);
ohlc.push([begin+index*1440*60*1000,3000,3500,2817,3300]);
//var temp = ohlc[ohlc.length-1];
//ohlc[ohlc.length-1]=[temp[0],temp[1],temp[2],temp[3]-index,temp[3]-index];
//console.log(ohlc);
chartss.series[0].setData(ohlc); index = index+1 ; }, 1000); }); </script>
</body>
</html>
highstock的更多相关文章
- 自动化运维：flask-bootstrap + highstock整合
1.在flask-bootstrap的base.html模板中加载highstock.js 以下是base.html的源码中,调用js文件的例子. 文件路径:python2.7/site-p ...
- ASP.NET HighStock
参考博客HighCharts/Highstock使用小结,使用汉化及中文帮助文档 参考博客highcharts与highstock实例
- highstock实现股票分时
highchart学习网站 www.highcharts.com http://www.hcharts.cn/docs/index.php http://www.hcharts.cn/api/high ...
- highcharts与highstock实例
highcharts实例代码 <head> <title>highcharts报表示例</title> <meta http-equiv="Cont ...
- SpringMVC+highstock实现曲线报表
最近项目要做曲线报表,之前用的是生成图片然后传到前端,感觉不是很好,在网上找到资料说highstock就可以而且还可以做类似股票的那种实时的曲线,研究的一段时间把项目问题解决了做个总结: 首先把hig ...
- highstock无图像
如果你的x轴是时间又是世纪秒的话又按以下设置的话,把xAxis的设置去掉试试看, 因为highstock会对世纪秒自动转换的 // xAxis: {// // max: 23, // min: 0, ...
- highstock高级篇之股票分时图
一直在用 highchart 在做图表,最近一段时间突然接到一活,需要用 highstock 帮客户完成一个股票K线图和分时图.虽然用法和 api上与 highchart 没什么区别,但还是研究一番做 ...
- highstock使用案例（异步请求，懒加载）
jsp中导入:<script src="<c:url value="/resources/js/highstock.js"></c:url> ...
- highstock K线图 深入研究
K线图,相信每个股民都不陌生,如何用SVG画好一个K线图是一个难题. 我选择用highstock做为画图组件,适当的修改了一下源码,参考了数个财经网站的案例,完成了一个不太成熟的K线图,欢迎大家批评指 ...
随机推荐
- "malloc: * error for object 0x17415d0c0: Invalid pointer dequeued from free list * set a breakpoint in malloc_error_break to debug";
I've fixed this error with Xcode 8 on iOS 8.3. I've just changed Deployment Target from 8.3 to 8.0. ...
- HDU 5889 Barricade
最短路,最小割,网络流. 可以根据$dis[u]+1$与$dis[v]$的大小关系判断$<u,v>$是否为最短路上的边,可以处理出一个只包含最短路的$DAG$,然后求这个$DAG$的最小割 ...
- js onblur 和 onkeyup 事件用法
1. onblur 表示失去焦点时触发 2. onkeyup 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时. 例子如下: <!DOCTYPE HTML PUBLIC "-/ ...
- 一个数组分四个ul并且每个ul里边有四个li显示
<?php $a = $array; for($i=0;$i<4;$i++ ) {?> <ul class="new-hover"> <?php ...
- 第一篇，jos
关于jos环,使用递推公式简化问题和代码,关键在于找到正确的递推公式,可使用一个例子来寻找. (数学能力较差,只好打个表找规律了) 为方便取余运算,将编号1---n的下标表示为0--(n-1) ...
- chrom扩展学习
详细教程-- http://www.ituring.com.cn/minibook/950
- MVC修改文件上传大小问题
在web.config文件的system.web节点的httpRuntime节点加入 maxRequestLength="2147483647" executionTimeout= ...
- Android app作为系统应用实现功能笔记
1.禁用StatusBar相关功能需要添加权限 <uses-permission android:name="android.permission.STATUS_BAR"&g ...
- 解决WordPress邮件无法发送问题
1 安装插件 Wp Mail Bank 2 开启第三方SMTP服务 以163为例:设置 - POP3/SMTP/IMAP 开启,会要求设置授权码 3 配置插件:Wp Mail Bank - sett ...
- Mybatis 获取插入记录的自增长ID
1.在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Java对象的属性名,而不是表格的字段名. <ins ...