landers.angular
Version:
landers.angular
252 lines (244 loc) • 10.2 kB
JavaScript
;angular.module('Landers.angular')
// Highcharts
.factory('DrawHighCharts', ['Flat', function (Flat) {
Highcharts.setOptions({
global: {
useUTC: false,
},
lang: {
loading: '<div style="margin: 130px auto;">图表正在绘制中...<div class="load8"> <div class="load8-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="load8-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="load8-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div>',
// loading : '<img src="/static/svg/loader/tail-spin.svg" style="width:40px; margin-top:-30px"/>'
},
credits: {
enabled: false
}
});
var colors1 = [
'#50ABF7',
'#F5AB31',
'#8FBA0E',
'#9658FB',
'#36F8AB',
'#11B7E0',
'#C9F600',
'#CD0074',
'#ff3e3e',
'#ff8acc',
'#00bbec',
'#fff537',
'#f04b5a',
'#846add',
'#2c6ed5',
'#ff8300',
'#f24285',
'#e748e5',
'#d73765',
'#e03e9c',
'#a3a3e8',
'#ffd84f',
'#00b26f',
'#e3b1fa',
'#7292e4',
'#f18162',
'#89d6aa',
'#ffb26a',
'#af867b',
'#ff9c8f'
];
function DrawHighCharts(scope, lines, propname, opts){
opts = opts || {};
var $chart = $('#' + propname + '-chart');
$chart.width($chart.parent().parent().width());
scope[propname] = {
loading: true,
title: {
text: false,
},
// xAxis: {type: 'categories', categories: []},
xAxis: opts.xAxis,
yAxis: opts.yAxis,
options: {
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
chart: {
zoomType: 'xy',
type: 'areaspline',
animation: Highcharts.svg,
events: {
load: function () {
}
},
},
tooltip: {
// formatter:function(){
// try {
// var a = ['<b>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '</b>'];
// angular.element.each(this.points, function(i, point){
// var arr = [],
// unit = point.series.tooltipOptions.valueSuffix;
// arr.push('<span>' + point.series.name + '</span>：');
// arr.push('<b>' + point.y + '</b>' + unit);
// a.push(arr.join(''));
// });
// return a.join('<br>');
// } catch(e) {}
// },
crosshairs: {
color: '#7ac943',
dashStyle: 'shortdot',
width : 1
},
shared: true,
valueDecimals: opts.tooltip.valueDecimals
},
colors: colors1
},
series : []
};
this.loading = function(is_show){
scope[propname].loading = is_show;
};
this.drawInit = function (chartDatas) {
scope[propname].loading = true;
scope[propname].series = [];
for (var i = 0; i < lines.length; i++) {
var cfg = lines[i];
var series = [], categories = [];
for ( var j = 0; j < chartDatas.length; j++) {
var x = chartDatas[j]['time']*1000;
var y = Flat.get(chartDatas[j], cfg.datakey);
// series.push([x, y]);
categories.push(chartDatas[j]['timeHuman']);
series.push(y);
}
scope[propname].xAxis.categories = categories;
scope[propname].series.push({
name: cfg.name,
type: 'areaspline',
yAxis: cfg.yAxis,
data: series,
tooltip: {
valueSuffix: cfg.unit
}
});
}
this.loading(false);
};
this.drawAppend = function(chartData) {
if (!chartData) return;
var category = chartData['timeHuman'];
var len = scope[propname].xAxis.categories.length;
if (scope[propname].xAxis.categories[len-1] != category) {
scope[propname].xAxis.categories.push(category);
}
var chart = $chart.highcharts();
if ( chart ) {
for (var i = 0; i < lines.length; i++) {
var cfg = lines[i];
var y = Flat.get(chartData, cfg.datakey);
// var point = [chartData['time']*1000, y];
var point = y;
chart.series[i].addPoint(point , true, true);
}
}
};
}
return {
make:function(scope, lines, propname, opts){
return new DrawHighCharts(scope, lines, propname, opts);
}
};
}])
// Chart.js
.factory('DrawCharts', ['Flat', function (Flat) {
function DrawCharts(scope, lines, propname){
var props = {
labels : propname + 'Labels',
datas : propname + 'Datas',
series : propname + 'Series',
options : propname + 'Options',
colours : propname + 'Colours'
};
var buildSeries = function(){
var ret = [];
for (var i = 0; i < lines.length; i++) {
var cfg = lines[i];
ret.push(cfg.name);
}
return ret;
},
buildPointLabels = function(datas){
var ret = [];
for (var i = 0; i < datas.length; i++) {
var time = Landers.utils.time.unix2human(datas[i].time);
ret.push(time);
}
return ret;
},
buildLineData = function(linekey, chartDatas) {
var ret = [];
for (var j = 0; j < chartDatas.length; j++) {
var chartData = chartDatas[j];
var point = Flat.get(chartData, linekey);
ret.push(point);
}
return ret;
};
this.drawInit = function (chartDatas) {
scope[props.options] = {
animation: false,
showScale: true,
showTooltips: true,
pointDot: false,
datasetStrokeWidth: 1
};
scope[props.colours] = [
{ // grey
fillColor: 'rgba(148,159,177,0.2)',
strokeColor: 'rgba(148,159,177,1)',
pointColor: 'rgba(148,159,177,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(148,159,177,0.8)'
},
{ // dark grey
fillColor: 'rgba(77,83,96,0.2)',
strokeColor: 'rgba(77,83,96,1)',
pointColor: 'rgba(77,83,96,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
}
];
scope[props.series] = buildSeries();
scope[props.labels] = buildPointLabels(chartDatas);
scope[props.datas] = [];
for (var i = 0; i < lines.length; i++) {
var cfg = lines[i];
scope[props.datas].push(buildLineData(cfg.datakey, chartDatas));
}
};
this.drawAppend = function(chartData) {
scope[props.labels].shift();
var time = Landers.utils.time.unix2human(chartData.time);
scope[props.labels].push(time);
var datas = scope[props.datas];
for (var i = 0; i < lines.length; i++) {
var cfg = lines[i];
var point = Flat.get(chartData, cfg.datakey);
scope[props.datas][i].shift();
scope[props.datas][i].push(point);
}
};
}
return {
make:function(scope, lines, props){
return new DrawCharts(scope, lines, props);
}
};
}]);