8 changed files with 694 additions and 3847 deletions
File diff suppressed because it is too large
@ -0,0 +1,20 @@ |
|||
/** |
|||
* 重写 数组 push 函数 |
|||
*/ |
|||
export class CustomeArray<T> extends Array<T>{ |
|||
|
|||
private callBack: any = null; |
|||
private params: any = null; |
|||
|
|||
constructor(callBack: any, ...params: any){ |
|||
super(); |
|||
this.callBack = callBack; |
|||
this.params = params; |
|||
} |
|||
|
|||
push(item: T): number { |
|||
const index = super.push(item); |
|||
this.callBack(this, this.params); |
|||
return index; |
|||
} |
|||
} |
|||
@ -0,0 +1,367 @@ |
|||
import moment from "moment"; |
|||
import { Box, Calc, ColorChart } from "../uilts/box-drawer"; |
|||
|
|||
export class HeatMapDrawer{ |
|||
private readonly id: string; |
|||
private canvas: any = null; |
|||
private canvasContext: any = null; |
|||
private targetCanvas: any = null; |
|||
private targetCanvasContext: any = null; |
|||
|
|||
private borderWidth: number = 0; |
|||
private borderHeight: number = 0; |
|||
|
|||
private readonly width: number = null; |
|||
private readonly height: number = null; |
|||
private readonly paddingLeft: number = 200; |
|||
private readonly paddingRight: number = 100; |
|||
private readonly paddingTop: number = 60; |
|||
private readonly paddingBottom: number = 50; |
|||
private colorChart: ColorChart = null; |
|||
private values: any = null; |
|||
private readonly verticalScaleSpecialCount: number = 1; |
|||
private readonly horizontalScaleSpecialCount: number = 1; |
|||
|
|||
// 垂直刻度
|
|||
private readonly verticalScaleLine: number = 18; |
|||
// 水平刻度
|
|||
private readonly horizontalScaleLine: number = 20; |
|||
public base64Image: string = null; |
|||
|
|||
private verticalScaleIntervalLength: number = 0; |
|||
private horizontalScaleIntervalLength: number = 0; |
|||
|
|||
private paddingColorLeft: number = 50; |
|||
private defaultColorWidth: number = 30; |
|||
|
|||
private calc: Calc = null; |
|||
private box: Box = null; |
|||
|
|||
private xAxis: CoordinateScale; |
|||
private yAxis: CoordinateScale; |
|||
|
|||
private unit: string; |
|||
|
|||
constructor(width: number, height: number, values: any, id: string, unit: string) { |
|||
if (id == null) return; |
|||
|
|||
this.id = id; |
|||
this.width = width; |
|||
this.height = height; |
|||
this.values = values; |
|||
this.unit = unit; |
|||
|
|||
this.init(); |
|||
} |
|||
|
|||
public setAxis(xAxis: CoordinateScale, yAxis: CoordinateScale): void { |
|||
this.xAxis = xAxis; |
|||
this.yAxis = yAxis; |
|||
} |
|||
|
|||
public setColorChart(colorChart: ColorChart) : void { |
|||
this.colorChart = colorChart; |
|||
} |
|||
|
|||
public drawColorChart(): void { |
|||
let startX = this.paddingLeft + this.horizontalScaleLine + this.borderWidth + this.paddingColorLeft; |
|||
let heightInterval = 0; |
|||
let startY = this.paddingTop + this.verticalScaleLine + heightInterval; |
|||
let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length) |
|||
|
|||
this.canvasContext.font = "normal 24px Verdana"; |
|||
this.canvasContext.fillStyle = "#000000"; |
|||
|
|||
for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){ |
|||
const targetIndex = lastLen - index; |
|||
const _y = startY + index * interval; |
|||
|
|||
this.canvasContext.fillStyle = this.colorChart.colors[targetIndex]; |
|||
this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval); |
|||
|
|||
this.canvasContext.fillStyle = "#000000"; |
|||
if (index == 0){ |
|||
if (this.colorChart.showStartValue){ |
|||
const text = this.colorChart.values[targetIndex + 1]; |
|||
this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + 9); |
|||
} |
|||
|
|||
const text = this.colorChart.values[targetIndex]; |
|||
this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9); |
|||
}else if (index == lastLen){ |
|||
if (this.colorChart.showEndValue){ |
|||
const text = this.colorChart.values[targetIndex]; |
|||
this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9); |
|||
} |
|||
|
|||
const text = this.colorChart.values[targetIndex + 1]; |
|||
this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + 9); |
|||
}else{ |
|||
const text = this.colorChart.values[targetIndex]; |
|||
this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9); |
|||
} |
|||
} |
|||
} |
|||
|
|||
public draw(): void{ |
|||
this.drawCoordinate(); |
|||
this.drawColorChart(); |
|||
this.redraw(); |
|||
this.setTargetCanvas(this.id); |
|||
} |
|||
|
|||
private calcDataScale() : void{ |
|||
this.verticalScaleIntervalLength = this.borderWidth / (this.values.length - 1); |
|||
this.horizontalScaleIntervalLength = this.borderHeight / (this.values[0].length - 1); |
|||
} |
|||
|
|||
private redraw(): void{ |
|||
this.calcDataScale(); |
|||
|
|||
let startX = this.paddingLeft + this.horizontalScaleLine - this.verticalScaleIntervalLength / 2; |
|||
let startY = this.paddingTop + this.verticalScaleLine - this.horizontalScaleIntervalLength / 2; |
|||
|
|||
for(let dataIndex = 0, len = this.values.length, lastDataLen = len - 1; dataIndex < len; dataIndex++){ |
|||
let value = this.values[dataIndex]; |
|||
for(let lastInfoLen = this.values[0].length - 1, infoIndex = lastInfoLen; infoIndex >= 0; infoIndex--){ |
|||
let x = startX + dataIndex * this.verticalScaleIntervalLength; |
|||
let y = startY + (this.borderHeight - infoIndex * this.horizontalScaleIntervalLength); |
|||
let width = this.verticalScaleIntervalLength; |
|||
let height = this.horizontalScaleIntervalLength; |
|||
if (dataIndex == 0) { |
|||
x = x + this.verticalScaleIntervalLength / 2; |
|||
width = width / 2; |
|||
} |
|||
if (infoIndex == lastInfoLen){ |
|||
y = y + this.horizontalScaleIntervalLength / 2; |
|||
height = height / 2; |
|||
} |
|||
if (dataIndex == lastDataLen){ |
|||
width = width / 2; |
|||
} |
|||
if (infoIndex == 0){ |
|||
height = height / 2; |
|||
} |
|||
|
|||
let targetValue = value[infoIndex].value; |
|||
let color = this.colorChart.getColor(targetValue); |
|||
value[infoIndex].updateBorderInfo(width, height); |
|||
if (color == null) continue; |
|||
this.canvasContext.fillStyle = color; |
|||
this.canvasContext.fillRect(x, y, width, height); |
|||
} |
|||
// this.values[dataIndex] = this.values[dataIndex].reverse();
|
|||
} |
|||
this.createCalc(this.values); |
|||
} |
|||
|
|||
private createCalc(boxes: any): void{ |
|||
this.calc = new Calc(this.width, this.height, this.paddingLeft + this.verticalScaleLine, this.paddingTop + this.horizontalScaleLine, |
|||
this.paddingRight + this.horizontalScaleLine, this.paddingBottom + this.verticalScaleLine, boxes); |
|||
} |
|||
|
|||
private init(): void{ |
|||
// 创建画布
|
|||
this.canvas = document.createElement('canvas'); |
|||
this.canvas.width = this.width; |
|||
this.canvas.height = this.height; |
|||
this.canvasContext = this.canvas.getContext('2d'); |
|||
|
|||
this.fillBackground(); |
|||
// this.resetValues();
|
|||
} |
|||
|
|||
private setTargetCanvas(id): void{ |
|||
this.targetCanvas = document.getElementById(id); |
|||
this.targetCanvas.width = this.width; |
|||
this.targetCanvas.height = this.height; |
|||
this.targetCanvasContext = this.targetCanvas.getContext('2d'); |
|||
this.copyCanvas(); |
|||
this.bindMoveEvent(); |
|||
} |
|||
|
|||
private copyCanvas(): void{ |
|||
const imgData= this.canvasContext.getImageData(0,0, this.width, this.height); |
|||
this.targetCanvasContext.putImageData(imgData, 0, 0); |
|||
} |
|||
|
|||
private _onMouseMove = this.onMouseMove.bind(this); |
|||
private _onMouseOut = this.onMouseOut.bind(this) |
|||
|
|||
private bindMoveEvent(): void{ |
|||
this.targetCanvas.addEventListener('mousemove', this._onMouseMove); |
|||
this.targetCanvas.addEventListener('mouseout', this._onMouseOut); |
|||
} |
|||
|
|||
private onMouseOut() : void{ |
|||
this.copyCanvas(); |
|||
} |
|||
|
|||
private onMouseMove(e) : void{ |
|||
let box = this.calc.calc(e.offsetX, e.offsetY); |
|||
if (box == null) { |
|||
if (this.box != null){ |
|||
this.copyCanvas(); |
|||
this.box = null; |
|||
} |
|||
return; |
|||
} |
|||
|
|||
if (this.box != null){ |
|||
if (this.box.id == box.id) return; |
|||
this.copyCanvas(); |
|||
this.box = null; |
|||
} |
|||
|
|||
box.show(this.targetCanvasContext); |
|||
this.box = box; |
|||
} |
|||
|
|||
public close(): void{ |
|||
this.targetCanvas.removeEventListener('mousemove', this._onMouseMove); |
|||
this.targetCanvas.removeEventListener('mouseout', this._onMouseOut); |
|||
this.values.length = 0; |
|||
} |
|||
|
|||
private fillBackground(): void{ |
|||
this.canvasContext.fillStyle = 'white'; |
|||
this.canvasContext.fillRect(0,0, this.width,this.height); |
|||
} |
|||
|
|||
public drawCoordinate(): void{ |
|||
this.drawBorder(); |
|||
this.drawVerticalScale(); |
|||
this.drawHorizontalScale(); |
|||
this.drawHeightText(); |
|||
this.drawTemperatureText(this.unit); |
|||
} |
|||
|
|||
//高度单位
|
|||
private drawHeightText(): void { |
|||
let name =['高','度','(','m',')']; // 文本内容
|
|||
let x = 70,y = 180; // 文字开始的坐标
|
|||
let letterSpacing = 20; // 设置字间距
|
|||
for(let i = 0; i < name.length; i++) { |
|||
const str = name.slice(i, i + 1).toString(); |
|||
if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转
|
|||
this.canvasContext.save(); |
|||
this.canvasContext.translate(x, y); |
|||
this.canvasContext.rotate(Math.PI / 180 * 90); |
|||
this.canvasContext.textBaseline = 'bottom'; |
|||
this.canvasContext.font = "normal 35px Verdana"; |
|||
this.canvasContext.fillStyle = "#000000"; |
|||
this.canvasContext.fillText(str, 0, 0); |
|||
this.canvasContext.restore(); |
|||
y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度
|
|||
} else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { |
|||
this.canvasContext.save(); |
|||
this.canvasContext.textBaseline = 'top'; |
|||
this.canvasContext.font = "normal 35px Verdana"; |
|||
this.canvasContext.fillStyle = "#000000"; |
|||
this.canvasContext.fillText(str, x, y); |
|||
this.canvasContext.restore(); |
|||
y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度
|
|||
} |
|||
} |
|||
} |
|||
//温度单位
|
|||
private drawTemperatureText(unit): void { |
|||
this.canvasContext.font = "normal 35px Verdana"; |
|||
this.canvasContext.fillStyle = "#000000"; |
|||
let unitX = 1390 |
|||
if (unit === '(degree)') unitX =1350 |
|||
this.canvasContext.fillText(unit, unitX, 50); |
|||
} |
|||
|
|||
private drawVerticalScale(): void{ |
|||
let scaleCount = this.xAxis.scales.length; |
|||
let verticalScaleIntervalLength = this.borderWidth / (scaleCount - 1); |
|||
|
|||
let startX = this.paddingLeft + this.horizontalScaleLine; |
|||
let startY = this.paddingTop + this.verticalScaleLine; |
|||
for(let index = 0, len = scaleCount, lastLen = scaleCount - 1; index < len; index++){ |
|||
if ((index == 0 && !this.xAxis.showStartValue) || (index == lastLen && !this.xAxis.showEndValue)) continue; |
|||
this.setScaleStyle(true); |
|||
|
|||
const _x = startX + index * verticalScaleIntervalLength; |
|||
this.canvasContext.beginPath(); |
|||
this.canvasContext.moveTo(_x, startY); |
|||
this.canvasContext.lineTo(_x,startY - this.verticalScaleLine); |
|||
this.canvasContext.moveTo(_x, startY + this.borderHeight); |
|||
this.canvasContext.lineTo(_x,startY + this.verticalScaleLine + this.borderHeight); |
|||
this.canvasContext.stroke(); |
|||
|
|||
if (true){ |
|||
this.canvasContext.font = "normal 30px Verdana"; |
|||
this.canvasContext.fillStyle = "#000000"; |
|||
this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 36); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private drawHorizontalScale(): void{ |
|||
let scaleCount = this.yAxis.scales.length; |
|||
let horizontalScaleIntervalLength = this.borderHeight / (scaleCount - 1); |
|||
let startX = this.paddingLeft + this.horizontalScaleLine; |
|||
let startY = this.paddingTop + this.verticalScaleLine; |
|||
const lastLen = scaleCount - 1; |
|||
for(let index = lastLen; index >= 0; index--) { |
|||
if ((index == 0 && !this.yAxis.showStartValue) || (index == lastLen && !this.yAxis.showEndValue)) continue; |
|||
this.setScaleStyle(true); |
|||
|
|||
const _y = startY + (this.borderHeight - index * horizontalScaleIntervalLength); |
|||
this.canvasContext.beginPath(); |
|||
this.canvasContext.moveTo(startX, _y); |
|||
this.canvasContext.lineTo(startX - this.horizontalScaleLine, _y); |
|||
this.canvasContext.moveTo(this.borderWidth + startX, _y); |
|||
this.canvasContext.lineTo(this.borderWidth + startX + this.horizontalScaleLine, _y); |
|||
this.canvasContext.stroke(); |
|||
|
|||
if (true) { |
|||
this.canvasContext.font = "normal 30px Verdana"; |
|||
this.canvasContext.fillStyle = "#000000"; |
|||
this.canvasContext.fillText(this.yAxis.scales[index], startX - this.canvasContext.measureText(this.yAxis.scales[index]).width - this.horizontalScaleLine, _y + 10); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private setScaleStyle(isSpecial: boolean): void{ |
|||
if (isSpecial){ |
|||
this.canvasContext.lineWidth = 3; |
|||
this.canvasContext.strokeStyle = '#101010'; |
|||
return; |
|||
} |
|||
this.canvasContext.lineWidth = 2; |
|||
this.canvasContext.strokeStyle = '#5e5e5e'; |
|||
} |
|||
|
|||
private drawBorder(): void{ |
|||
const x = this.horizontalScaleLine + this.paddingLeft; |
|||
const y = this.verticalScaleLine + this.paddingTop; |
|||
const _x = this.width - this.horizontalScaleLine - this.paddingRight; |
|||
const _y = this.height - this.verticalScaleLine - this.paddingBottom; |
|||
|
|||
this.canvasContext.beginPath(); |
|||
this.canvasContext.lineWidth = "2"; |
|||
this.canvasContext.strokeStyle = "black"; |
|||
|
|||
this.borderWidth = _x - x; |
|||
this.borderHeight = _y - y; |
|||
this.canvasContext.rect(x, y, this.borderWidth, this.borderHeight); |
|||
this.canvasContext.stroke(); |
|||
} |
|||
} |
|||
|
|||
export class CoordinateScale { |
|||
|
|||
public scales: Array<number>; |
|||
public showStartValue: boolean; |
|||
public showEndValue: boolean; |
|||
|
|||
constructor(scales: Array<number>, showStartValue: boolean = false, showEndValue: boolean = false){ |
|||
this.scales = scales; |
|||
this.showEndValue = showEndValue; |
|||
this.showStartValue = showStartValue; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,133 @@ |
|||
import * as Highcharts from "highcharts" |
|||
// Highcharts.heatmap(Highcharts);
|
|||
|
|||
export class HighChartHeatMapCreate { |
|||
|
|||
private readonly id: string; |
|||
|
|||
private highChart: any; |
|||
private chart: any; |
|||
private xAxis: Array<any> = []; |
|||
private yAxis: Array<any> = []; |
|||
private series: Array<any> = []; |
|||
private legend: any = null; |
|||
private tooltip: any = null; |
|||
private colorAxis: any = null; |
|||
|
|||
constructor(id: string) { |
|||
this.id = id; |
|||
} |
|||
|
|||
public setChart(type: string = 'heatmap'): void{ |
|||
this.chart = { |
|||
type: 'heatmap', |
|||
marginTop: 40, |
|||
marginBottom: 80, |
|||
plotBorderWidth: 1 |
|||
}; |
|||
} |
|||
|
|||
public setXAxis(text: string, reversed: boolean = true){ |
|||
this.xAxis.push({ |
|||
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'] |
|||
}); |
|||
} |
|||
|
|||
public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){ |
|||
this.yAxis.push({ |
|||
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], |
|||
title: null |
|||
}); |
|||
} |
|||
|
|||
public setColorAxis(): void { |
|||
this.colorAxis = { |
|||
min: 0, |
|||
minColor: '#FFFFFF', |
|||
maxColor: Highcharts.getOptions().colors[0] |
|||
} |
|||
} |
|||
|
|||
public setLegend(enabled: boolean = false){ |
|||
this.legend = { |
|||
align: 'right', |
|||
layout: 'vertical', |
|||
margin: 0, |
|||
verticalAlign: 'top', |
|||
y: 25, |
|||
symbolHeight: 280 |
|||
} |
|||
} |
|||
|
|||
public setTooltip(pointFormat: string, headerFormat: string = '<b>{series.name}</b><br/>'){ |
|||
this.tooltip = { |
|||
formatter: function () { |
|||
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + |
|||
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// public setSeries(name: string)
|
|||
public setSeries(data: any){ |
|||
// let series: any = {
|
|||
// name: name,
|
|||
// data: [],
|
|||
// }
|
|||
// if (color == null || valueSuffix == null){
|
|||
// this.series.push(series);
|
|||
// return
|
|||
// }
|
|||
|
|||
// series.yAxis = yAxis;
|
|||
// series.tooltip = {
|
|||
// valueSuffix: valueSuffix
|
|||
// };
|
|||
// series.color = color;
|
|||
this.series.push({ |
|||
name: 'Sales per employee', |
|||
borderWidth: 1, |
|||
data: data, |
|||
dataLabels: { |
|||
enabled: true, |
|||
color: '#000000' |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public init(): void{ |
|||
const options = this.getOptions(); |
|||
this.highChart = Highcharts.chart(this.id, options); |
|||
// return this.highChart;
|
|||
} |
|||
|
|||
private getOptions(){ |
|||
let options: any = { |
|||
credits: { |
|||
enabled: false |
|||
}, |
|||
chart: this.chart, |
|||
title: { |
|||
text: null |
|||
}, |
|||
xAxis: this.xAxis, |
|||
yAxis: this.yAxis, |
|||
colorAxis: this.colorAxis, |
|||
tooltip: this.tooltip, |
|||
series: this.series |
|||
}; |
|||
if (this.legend != null) |
|||
options.legend = this.legend; |
|||
|
|||
return options; |
|||
} |
|||
|
|||
public updateSeries(index: number, data: Array<any>): void{ |
|||
this.highChart.series[index].setData(data); |
|||
} |
|||
|
|||
public updateXAxis(categories: Array<any>, index: number = 0){ |
|||
this.highChart.xAxis[index].setCategories(categories); |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,27 @@ |
|||
const arrayProtoType = Object.create(Array.prototype) |
|||
// 创建一个新的原型，这就是改造之后的数组原型
|
|||
const ArrayProto = [] |
|||
// 重新构建Array原型里面的虽有方法
|
|||
Object.getOwnPropertyNames(Array.prototype).forEach(key => { |
|||
// console.log(key)
|
|||
if (typeof arrayProtoType[key] === "function"){ |
|||
// console.log(arrayProtoType[key], key)
|
|||
ArrayProto[key] = function () { |
|||
// listenMethods(key);
|
|||
return arrayProtoType[key].apply(this, arguments); |
|||
} |
|||
} |
|||
if (key === "push"){ |
|||
listenProps("push") |
|||
} |
|||
ArrayProto[key] = arrayProtoType[key]; |
|||
}) |
|||
|
|||
function listenProps(prop){ |
|||
console.log( prop + 'prop触发了'); |
|||
// 其他你需要监听的逻辑
|
|||
} |
|||
|
|||
export { |
|||
ArrayProto |
|||
} |
|||
Loading…
Reference in new issue