//
|
var util = require('../../utils/util.js');
|
|
class SignalChart {
|
|
constructor(objName, chartWidth, chartHeight, padding) {
|
this.objName = objName;
|
this.chartWidth = chartWidth;
|
this.chartHeight = chartHeight;
|
this.padding_top = 70; //this.getEleHeight(70);
|
this.padding_bottom = 35; //this.getEleHeight(50);
|
this.padding_left = 28; //this.getEleWidth(70);
|
this.padding_right = 5; //this.getEleWidth(20);
|
|
if (padding != null) {
|
if (padding.top != null) {
|
this.padding_top = padding.top;
|
}
|
}
|
this.ctx = wx.createCanvasContext(objName);
|
this.ctx.clearRect(0, 0, chartWidth, chartHeight) //清理一下
|
}
|
//坐标
|
initialChartCoord(coord) {
|
this.coord = coord;
|
}
|
initialChartTitle(chartTitle, padding_top, padding_left) {
|
this.chartTile = {
|
text: chartTitle,
|
padding_top: padding_top,
|
padding_left: padding_left
|
};
|
}
|
|
drawRefreshTimeText(text) {
|
const ctx = this.ctx;
|
ctx.setFillStyle('white')
|
ctx.fillRect(this.chartWidth - 80, 0, 80, 22)
|
//ctx.save();
|
//ctx.draw(true);
|
|
ctx.setFontSize(9);
|
ctx.setFillStyle('red');
|
|
ctx.fillText(text, this.getEleWidth(950), this.getEleHeight(18));
|
ctx.save();
|
ctx.draw(true);
|
}
|
addNewRecord(newRecord) {
|
this.records.push(newRecord);
|
this.draw(this.records);
|
}
|
addNewRecords(newRecords) {
|
this.records.push(newRecords);
|
this.draw(this.records);
|
}
|
clearAll() {
|
this.ctx.clearRect(0, 0, this.chartWidth, this.chartHeight) //清理一下
|
}
|
|
draw(records) {
|
this.records = records;
|
if (this.records == null || this.records.length<3)
|
return;
|
var that = this;
|
var coord = this.coord;
|
if (coord == null) {
|
coord = this.calcCoordValue(records);
|
}
|
|
var chartWidth = this.chartWidth;
|
var chartHeight = this.chartHeight;
|
//console.log("chartWidth:" + chartWidth);
|
//console.log("chartHeight:" + chartHeight);
|
const ctx = this.ctx;
|
|
|
var padding_top = this.padding_top;
|
var padding_bottom = this.padding_bottom;
|
var padding_left = this.padding_left;
|
var padding_right = this.padding_right;
|
var diagram_width = chartWidth - padding_left - padding_right;
|
var diagram_heigh = chartHeight - padding_top - padding_bottom;
|
|
//ctx.clearRect(padding_left, padding_top, diagram_width, diagram_heigh)//清理一下
|
|
|
|
const diagram_leftTop = {
|
x: padding_left,
|
y: padding_top
|
}
|
const diagram_leftBottom = {
|
x: padding_left,
|
y: padding_top + diagram_heigh
|
}
|
const diagram_rightTop = {
|
x: padding_left + diagram_width,
|
y: padding_top
|
}
|
|
//绘制区域
|
const grd = ctx.createLinearGradient(0, 0, 200, 0)
|
grd.addColorStop(0, '#7B68EE');
|
grd.addColorStop(1, '#87CEFF');
|
ctx.setFillStyle(grd);
|
ctx.fillRect(padding_left, padding_top, diagram_width, diagram_heigh);
|
ctx.stroke();
|
|
//标题
|
ctx.setFontSize(14);
|
ctx.setFillStyle('blue');
|
ctx.setTextAlign('center')
|
ctx.fillText(this.chartTile.text, this.chartTile.padding_left, this.chartTile.padding_top);
|
ctx.save();
|
|
ctx.beginPath();
|
|
|
|
|
//时间坐标
|
var coordTime = this.calcCoordTime(records[0], records[records.length - 1]);
|
|
//绘制曲线
|
for (var i = 0; i < records.length; i++) {
|
var pt = records[i];
|
var x = padding_left + (diagram_width * (pt.RecordValue - coord.Min) / (coord.Max - coord.Min));
|
var time = pt.RecordTime.replace(/-/g, '/');
|
|
var y = (new Date(time) - coordTime.Start) * diagram_heigh / coordTime.Total + padding_top;
|
if (i == 0) {
|
ctx.moveTo(x, y)
|
} else {
|
ctx.lineTo(x, y)
|
}
|
}
|
ctx.setLineWidth(2);
|
ctx.setStrokeStyle('red');
|
ctx.stroke();
|
//ctx.save()
|
|
//时间轴(刻度文字)
|
ctx.setTextAlign('center')
|
var step = 1;
|
if (coordTime.GridNumber>12)
|
step = 2;
|
for (var i = 0; i <= coordTime.GridNumber; i = i + step) {
|
var y = padding_top + i * diagram_heigh / coordTime.GridNumber;
|
var x = padding_left;
|
var t = new Date(coordTime.Start.getTime() + coordTime.Space * i);
|
|
var hour = t.getHours()
|
var minute = t.getMinutes();
|
if (minute<3){
|
ctx.moveTo(x, y);
|
ctx.lineTo(x - 5, y);
|
ctx.translate(x, y)
|
ctx.rotate(Math.PI / 2)
|
ctx.setFontSize(9)
|
ctx.fillText(hour, 0, 17)
|
ctx.rotate(-Math.PI / 2)
|
ctx.translate(-x, -y);
|
}
|
else{
|
minute = minute < 10 ? ('0' + minute) : minute;
|
ctx.moveTo(x, y);
|
ctx.lineTo(x - 5, y);
|
ctx.translate(x, y)
|
ctx.rotate(Math.PI / 2)
|
ctx.setFontSize(9)
|
ctx.fillText(hour + ":" + minute, 0, 17)
|
ctx.rotate(-Math.PI / 2)
|
ctx.translate(-x, -y);
|
}
|
|
}
|
|
//监控值坐标(刻度文字)
|
ctx.setTextAlign('right')
|
//ctx.setTextBaseline('middle')
|
for (var v = coord.Min; v <= coord.Max + 0.001; v = v + coord.Space) {
|
var y = padding_top;
|
var x = padding_left + (diagram_width * (v - coord.Min) / (coord.Max - coord.Min));
|
var str_v = util.valueFormat(v)
|
//console.log(str_v)
|
ctx.moveTo(x, y);
|
ctx.lineTo(x, y - 4);
|
ctx.translate(x, y)
|
ctx.rotate(Math.PI / 2)
|
ctx.setFontSize(9)
|
ctx.fillText(str_v, -10, 5)
|
ctx.rotate(-Math.PI / 2)
|
ctx.translate(-x, -y)
|
}
|
ctx.translate(0, 0)
|
ctx.setLineWidth(1);
|
ctx.setStrokeStyle('#707070');
|
ctx.stroke();
|
//ctx.save()
|
|
//GridLine 网格线
|
const space_dashLine = this.getEleWidth(15);
|
for (var v = coord.Min + coord.Space; v < coord.Max; v = v + coord.Space) {
|
var y = padding_top;
|
var x = padding_left + (diagram_width * (v - coord.Min) / (coord.Max - coord.Min));
|
this.drawDashLine(ctx, x, padding_top, x, padding_top + diagram_heigh, space_dashLine)
|
}
|
for (var i = 2; i < coordTime.GridNumber; i = i + 2) {
|
var y = padding_top + i * diagram_heigh / coordTime.GridNumber;
|
this.drawDashLine(ctx, padding_left, y, padding_left + diagram_width, y, space_dashLine)
|
}
|
|
//y轴
|
ctx.beginPath();
|
ctx.moveTo(diagram_leftTop.x, diagram_leftTop.y);
|
ctx.lineTo(diagram_rightTop.x, diagram_rightTop.y);
|
|
//x轴
|
ctx.moveTo(diagram_leftTop.x, diagram_leftTop.y);
|
ctx.lineTo(diagram_leftBottom.x, diagram_leftBottom.y);
|
ctx.setLineWidth(1);
|
ctx.setStrokeStyle('#707070')
|
ctx.stroke();
|
|
|
ctx.save();
|
|
|
ctx.draw(true)
|
}
|
//画虚线
|
drawDashLine(ctx, x1, y1, x2, y2, dashLength) { //传context对象，始点x和y坐标，终点x和y坐标，虚线长度
|
ctx.beginPath()
|
ctx.setLineWidth(0.5)
|
var dashLen = dashLength === undefined ? 3 : dashLength,
|
xpos = x2 - x1, //得到横向的宽度;
|
ypos = y2 - y1, //得到纵向的高度;
|
numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);
|
//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
|
for (var i = 0; i < numDashes; i++) {
|
if (i % 2 === 0) {
|
ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
|
//有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
|
} else {
|
ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
|
}
|
}
|
ctx.stroke();
|
}
|
//为了获取宽度 //以宽度1000px设计稿做宽度的自适应
|
getEleWidth(w) {
|
var real = 0;
|
try {
|
var res = this.chartWidth;
|
var scale = 1000 / w;
|
real = Math.floor(res / scale);
|
return real;
|
} catch (e) {
|
return false;
|
}
|
}
|
//以宽度1000px设计稿做宽度的自适应
|
getEleHeight(w) {
|
var real = 0;
|
try {
|
var res = this.chartHeight;
|
var scale = 1000 / w;
|
real = Math.floor(res / scale);
|
return real;
|
} catch (e) {
|
return false;
|
}
|
}
|
formatNumber(n) {
|
n = n.toString()
|
return n[1] ? n : '0' + n
|
}
|
formatTimeByHour(date, hour, minute) {
|
var year = date.getFullYear();
|
var month = date.getMonth() + 1;
|
var day = date.getDate();
|
|
var second = 0;
|
if (hour >= 24) {
|
var nextDay = util.GetNextDate(date, 1);
|
var year = nextDay.getFullYear();
|
var month = nextDay.getMonth() + 1;
|
var day = nextDay.getDate();
|
hour = 0;
|
minute = 0;
|
second = 0;
|
var st = [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber).join(':');
|
return new Date(st.replace(/-/g, '/'));
|
} else {
|
var st = [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber).join(':');
|
return new Date(st.replace(/-/g, '/'));
|
}
|
}
|
calcCoordTime(startRecord, lastRecord) {
|
var startRecordTime = new Date(startRecord.RecordTime.replace(/-/g, '/'));
|
var endRecordTime = new Date(lastRecord.RecordTime.replace(/-/g, '/'));
|
var startRecordTime_new = this.formatTimeByHour(startRecordTime, startRecordTime.getHours(), 0);
|
var endRecordTime_new = this.formatTimeByHour(endRecordTime, endRecordTime.getHours() + 1, 0);
|
|
var coordTime = {};
|
coordTime.Start = startRecordTime_new;
|
coordTime.End = endRecordTime_new;
|
var totalTime = (endRecordTime_new - startRecordTime_new);
|
coordTime.Total = totalTime;
|
|
var startRecordTime_hour = startRecordTime_new.getHours();
|
var endRecordTime_hour = endRecordTime_new.getHours();
|
if (endRecordTime_hour == 0){
|
coordTime.GridNumber = 24 - startRecordTime_hour;
|
coordTime.Space = totalTime / coordTime.GridNumber;
|
return coordTime;
|
}
|
else{
|
coordTime.GridNumber = (endRecordTime_hour - startRecordTime_hour);
|
if (coordTime.GridNumber <= 0)
|
coordTime.GridNumber = 24;
|
coordTime.Space = totalTime / coordTime.GridNumber;
|
return coordTime;
|
}
|
|
}
|
//值坐标
|
optCoordValue(maxRecord) { //不能大于1
|
var coord = {};
|
if (maxRecord < 0.2) {
|
coord.Max = 0.2;
|
coord.Space = 0.05;
|
} else if (maxRecord < 0.3) {
|
coord.Max = 0.3;
|
coord.Space = 0.1;
|
} else if (maxRecord < 0.6) {
|
coord.Max = 0.6;
|
coord.Space = 0.2;
|
} else if (maxRecord < 0.8) {
|
coord.Max = 0.8;
|
coord.Space = 0.2;
|
} else {
|
coord.Max = 1;
|
coord.Space = 0.2;
|
}
|
return coord;
|
}
|
|
calcCoordValue(records) {
|
var coord = {};
|
//Max < coord.Min + 0.01 || coord.Space
|
var maxRecord = 0;
|
var nn = records.length;
|
for (var i = 0; i < nn; i++) {
|
var dataValue = records[i].RecordValue;
|
maxRecord = Math.max(maxRecord, dataValue);
|
}
|
if (maxRecord < 0.1) {
|
coord = this.optCoordValue(maxRecord * 10);
|
coord.Min = 0;
|
coord.Max = coord.Max / 10.0;
|
coord.Space = coord.Space / 10.0;
|
} else if (maxRecord < 1) {
|
coord = this.optCoordValue(maxRecord);
|
coord.Min = 0;
|
coord.Max = coord.Max;
|
coord.Space = coord.Space;
|
} else if (maxRecord < 10) {
|
coord = this.optCoordValue(maxRecord / 10.0);
|
coord.Min = 0;
|
coord.Max = coord.Max * 10;
|
coord.Space = coord.Space * 10;
|
} else if (maxRecord < 100) {
|
coord = this.optCoordValue(maxRecord / 100.0);
|
coord.Min = 0;
|
coord.Max = coord.Max * 100;
|
coord.Space = coord.Space * 100;
|
} else if (maxRecord < 1000) {
|
coord = this.optCoordValue(maxRecord / 1000.0);
|
coord.Min = 0;
|
coord.Max = coord.Max * 1000;
|
coord.Space = coord.Space * 1000;
|
} else if (maxRecord < 10000) {
|
coord = this.optCoordValue(maxRecord / 10000.0);
|
coord.Min = 0;
|
coord.Max = coord.Max * 10000;
|
coord.Space = coord.Space * 10000;
|
} else if (maxRecord < 100000) {
|
coord = this.optCoordValue(maxRecord / 100000.0);
|
coord.Min = 0;
|
coord.Max = coord.Max * 100000;
|
coord.Space = coord.Space * 100000;
|
} else {
|
coord.Min = 0;
|
coord.Max = util.valueFormat(maxRecord * 1.2);
|
coord.Space = coord.Max / 4;
|
}
|
|
return coord;
|
}
|
|
}
|
|
export {
|
SignalChart
|
};
|
