339 lines
8.7 KiB
JavaScript
339 lines
8.7 KiB
JavaScript
'use strict';
|
|
define(['app', 'jquery', 'highstock'], function (app, $, Highcharts) {
|
|
app.directive('highStock', function () {
|
|
|
|
/**
|
|
* @return {number}
|
|
*/
|
|
//算移动均线
|
|
var MovingAverage = function (data, i, n) {
|
|
if (i >= n - 1) {
|
|
var sum = 0;
|
|
for (var j = 0; j <= n - 1; j++) {
|
|
sum = sum + parseFloat(data[i - j].ClosingPrice);
|
|
}
|
|
return sum / n;
|
|
} else {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// 处理转换数据
|
|
var handleSeries = function (data) {
|
|
var dataArray = {ohlcArray: [], volumeArray: [], MA5Array: [], MA10Array: [], MA30Array: []};
|
|
for (var i = 0; i < data.length; i++) {
|
|
dataArray.ohlcArray.push([
|
|
parseInt(data[i].Date * 1000), // the date
|
|
parseFloat(data[i].OpeningPrice), // open
|
|
parseFloat(data[i].HighestPrice), // high
|
|
parseFloat(data[i].LowestPrice), // low
|
|
parseFloat(data[i].ClosingPrice) // close
|
|
]);
|
|
|
|
dataArray.MA5Array.push([
|
|
parseInt(data[i].Date * 1000), // the date
|
|
MovingAverage(data, i, 5)
|
|
]);
|
|
|
|
dataArray.MA10Array.push([
|
|
parseInt(data[i].Date * 1000),
|
|
MovingAverage(data, i, 10)
|
|
]);
|
|
|
|
dataArray.MA30Array.push([
|
|
parseInt(data[i].Date * 1000),
|
|
MovingAverage(data, i, 30)
|
|
]);
|
|
dataArray.volumeArray.push([
|
|
parseInt(data[i].Date * 1000), // the date
|
|
parseInt(data[i].Volume) // 成交量
|
|
]);
|
|
}
|
|
var last = data.length - 1;
|
|
|
|
if (last + 1 <= 90 && $(window).width() > 768) {
|
|
for (i = 1; i <= 90 - last - 1; i++) {
|
|
var date = data[last].Date * 1000 + i * 24 * 60 * 60 * 1000;
|
|
dataArray.ohlcArray.push([
|
|
date, // the date
|
|
null, // open
|
|
null, // high
|
|
null, // low
|
|
null // close
|
|
]);
|
|
}
|
|
}
|
|
return dataArray;
|
|
};
|
|
|
|
//画图表
|
|
var getMergedOptions = function (element, options, series) {
|
|
var defaultOptions = {
|
|
chart: {
|
|
renderTo: element[0],
|
|
margin: [10, 10, 15, 10],
|
|
plotBorderColor: '#E7F2F8',
|
|
plotBorderWidth: 0
|
|
},
|
|
title: {
|
|
enabled: false
|
|
},
|
|
subtitle: {
|
|
enabled: false
|
|
},
|
|
exporting: {
|
|
enabled: false
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
rangeSelector: {
|
|
enabled: false
|
|
},
|
|
plotOptions: {
|
|
//修改蜡烛颜色
|
|
candlestick: {
|
|
color: '#33AA11',
|
|
upColor: '#DD2200',
|
|
lineColor: '#33AA11',
|
|
upLineColor: '#DD2200',
|
|
maker: {
|
|
states: {
|
|
hover: {
|
|
enabled: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//去掉曲线和蜡烛上的hover事件
|
|
series: {
|
|
states: {
|
|
hover: {
|
|
enabled: false
|
|
}
|
|
},
|
|
line: {
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
formatter: function () {
|
|
if (this.y == undefined) {
|
|
return;
|
|
}
|
|
for (var i = 0; i < series.length; i++) {
|
|
if (this.x == series[i].Date * 1000) {
|
|
var zde = parseFloat(series[i].ClosingPrice - series[i].OpeningPrice).toFixed(intFormatFloat);
|
|
//zdf = parseFloat((data[i].ClosingPrice - data[i].OpeningPrice) / data[i].OpeningPrice).toFixed(intFormatFloat);
|
|
var zdf = (series[i].ClosingPrice - series[i].OpeningPrice) / series[i].OpeningPrice;
|
|
}
|
|
}
|
|
var open = this.points[0].point.open.toFixed(4);
|
|
var high = this.points[0].point.high.toFixed(4);
|
|
var low = this.points[0].point.low.toFixed(4);
|
|
var close = this.points[0].point.close.toFixed(4);
|
|
var y = this.points[1].point.y;
|
|
|
|
var tip = '<b>' + Highcharts.dateFormat('%Y-%m-%d %A', this.x) + '</b><br/>';
|
|
tip += '开盘价：' + open + '<br/>';
|
|
tip += '收盘价：' + close + '<br/>';
|
|
tip += '最高价：' + high + '<br/>';
|
|
tip += '最低价：' + low + '<br/>';
|
|
|
|
if (open < close) {
|
|
tip += '涨跌额：<span style="color:#F56363;">' + zde + '</span><br/>';
|
|
tip += '涨跌幅：<span style="color:#F56363;">' + (zdf * 100).toFixed(2) + '%</span><br/>';
|
|
} else
|
|
if (open > close) {
|
|
tip += '涨跌额：<span style="color:#5B910B;">' + zde + '</span><br/>';
|
|
tip += '涨跌幅：<span style="color:#5B910B;">' + (zdf * 100).toFixed(2) + '%</span><br/>';
|
|
} else {
|
|
tip += '涨跌额：<span>' + zde + '</span><br/>';
|
|
tip += '涨跌幅：<span>' + (zdf * 100).toFixed(2) + '%</span><br/>';
|
|
}
|
|
|
|
|
|
if (y > 10000 * 10000) {
|
|
tip += "成交量：" + (y * 0.00000001).toFixed(4) + "亿<br/>";
|
|
} else if (y > 10000) {
|
|
tip += "成交量：" + (y * 0.0001).toFixed(4) + "万<br/>";
|
|
} else if(isNaN(y)){
|
|
tip += "成交量：" + 0 + "<br/>";
|
|
}else {
|
|
tip += "成交量：" + y + "<br/>";
|
|
}
|
|
return tip;
|
|
},
|
|
borderColor: 'white',
|
|
|
|
shadow: true
|
|
},
|
|
navigator: {
|
|
//enabled: false,
|
|
adaptToUpdatedData: false,
|
|
xAxis: {
|
|
labels: {
|
|
formatter: function () {
|
|
return Highcharts.dateFormat('%m-%d', this.value);
|
|
}
|
|
}
|
|
},
|
|
handles: {
|
|
backgroundColor: '#808080'
|
|
}
|
|
// margin: 0
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
tickLength: 0,
|
|
events: {
|
|
afterSetExtremes: function (e) {
|
|
var minTime = Highcharts.dateFormat("%Y-%m-%d", e.min);
|
|
var maxTime = Highcharts.dateFormat("%Y-%m-%d", e.max);
|
|
var chart = this.chart;
|
|
}
|
|
},
|
|
labels: {
|
|
formatter: function () {
|
|
return Highcharts.dateFormat('%m-%d', this.value);
|
|
}
|
|
}
|
|
},
|
|
yAxis: [{
|
|
title: {
|
|
enable: false
|
|
},
|
|
height: '74%',
|
|
lineWidth: 1,
|
|
gridLineColor: '#346691',
|
|
gridLineWidth: 0.1,
|
|
opposite: true
|
|
}, {
|
|
title: {
|
|
enable: false
|
|
},
|
|
top: '80%',
|
|
height: '20%',
|
|
offset: 0,
|
|
gridLineColor: '#346691',
|
|
gridLineWidth: 0.1,
|
|
lineWidth: 1
|
|
}],
|
|
|
|
series: []
|
|
};
|
|
var mergedOptions = {};
|
|
if (options) {
|
|
mergedOptions = $.extend(true, {}, defaultOptions, options);
|
|
} else {
|
|
mergedOptions = defaultOptions;
|
|
}
|
|
if (series) {
|
|
mergedOptions.series = series
|
|
}
|
|
return mergedOptions
|
|
};
|
|
|
|
return {
|
|
restrict: 'EC',
|
|
scope: {
|
|
series: '=',
|
|
options: '=',
|
|
title: '='
|
|
},
|
|
replace: true,
|
|
template: '<div id="container" style="width:100%;height:400px"></div>',
|
|
link: function (scope, element) {
|
|
|
|
var mergedOptions = getMergedOptions(element, scope.options, scope.series);
|
|
var chart = new Highcharts.StockChart(mergedOptions);
|
|
scope.$watch("series", function (newSeries, oldSeries) {
|
|
|
|
var originalDrawPoints = Highcharts.seriesTypes.column.prototype.drawPoints;
|
|
Highcharts.seriesTypes.column.prototype.drawPoints = function () {
|
|
var merge = Highcharts.merge,
|
|
series = this,
|
|
chart = this.chart,
|
|
points = series.points,
|
|
i = points.length;
|
|
|
|
while (i--) {
|
|
var candlePoint = chart.series[0].points[i];
|
|
if (candlePoint.open != undefined && candlePoint.close != undefined) { //如果是K线图 改变矩形条颜色，否则不变
|
|
|
|
var color = '#888888';
|
|
if (candlePoint.open < candlePoint.close)
|
|
{
|
|
color = '#DD2200';
|
|
}
|
|
else if (candlePoint.open > candlePoint.close)
|
|
{
|
|
color = '#33AA11'
|
|
}
|
|
console.log(series.pointAttr);
|
|
var seriesPointAttr = merge(series.pointAttr);
|
|
seriesPointAttr[''].fill = color;
|
|
seriesPointAttr.hover.fill = Highcharts.Color(color).brighten(0.3).get();
|
|
seriesPointAttr.select.fill = color;
|
|
} else {
|
|
var seriesPointAttr = merge(series.pointAttr);
|
|
}
|
|
|
|
points[i].pointAttr = seriesPointAttr;
|
|
}
|
|
originalDrawPoints.call(this);
|
|
};
|
|
|
|
//常量本地化
|
|
Highcharts.setOptions({
|
|
global: {
|
|
useUTC: false
|
|
},
|
|
lang: {
|
|
rangeSelectorFrom: "日期:",
|
|
rangeSelectorTo: "至",
|
|
rangeSelectorZoom: "范围",
|
|
loading: '加载中...',
|
|
|
|
shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
}
|
|
});
|
|
|
|
if (newSeries === oldSeries) return;
|
|
if (newSeries) {
|
|
var data = handleSeries(newSeries);
|
|
chart.addSeries({
|
|
type: 'candlestick',
|
|
id: "candlestick",
|
|
name: "kline",
|
|
data: data.ohlcArray,
|
|
dataGrouping: {
|
|
enabled: false
|
|
},
|
|
animation: false,
|
|
//pointWidth: 5,
|
|
});
|
|
chart.addSeries({
|
|
type: 'column',
|
|
name: '成交量',
|
|
data: data.volumeArray,
|
|
yAxis: 1,
|
|
dataGrouping: {
|
|
enabled: false
|
|
},
|
|
animation: false
|
|
//pointWidth: 5,
|
|
});
|
|
|
|
chart.redraw();
|
|
}
|
|
}, true);
|
|
}
|
|
}
|
|
});
|
|
});
|