818 lines
28 KiB
JavaScript
818 lines
28 KiB
JavaScript
|
|
!(function (e, t) {
|
|
"object" == typeof exports && "undefined" != typeof module
|
|
? (module.exports = t(e))
|
|
: "function" == typeof define && define.amd
|
|
? define(t, e)
|
|
: ((e = "undefined" != typeof globalThis ? globalThis : e || self).lineChart =
|
|
t(e));
|
|
})(this, function (scope) {
|
|
|
|
|
|
function DataExtract() {
|
|
let _ctx = this.$ctx = {
|
|
paused: false,
|
|
sourceMin: 0,
|
|
sourceMax: 1920,
|
|
currentMin: 0,
|
|
currentMax: 1920,
|
|
clientPixel: 1920,
|
|
pixelScale: 1,
|
|
displayPoints: [],
|
|
|
|
}
|
|
}
|
|
const SampleFreqs = [78125, 156250, 312500, 625000, 1250000, 2500000, 5000000, 10000000, 20000000, 40000000, 80000000];
|
|
DataExtract.prototype.update = function (options) {
|
|
let _ctx = this.$ctx;
|
|
if (options.hasOwnProperty("paused")) _ctx.paused = options.paused;
|
|
if (options.hasOwnProperty("sourceMin")) _ctx.sourceMin = options.sourceMin;
|
|
if (options.hasOwnProperty("sourceMax")) _ctx.sourceMax = options.sourceMax;
|
|
if (options.hasOwnProperty("currentMin")) _ctx.currentMin = options.currentMin;
|
|
if (options.hasOwnProperty("currentMax")) _ctx.currentMax = options.currentMax;
|
|
if (options.hasOwnProperty("clientPixel")) _ctx.clientPixel = options.clientPixel;
|
|
if (options.hasOwnProperty("displayPoints")) _ctx.displayPoints = options.displayPoints;
|
|
}
|
|
var _Saved = true;
|
|
|
|
DataExtract.prototype.take = function (current, data, cache) {
|
|
// if (this.$ctx.paused) return [];
|
|
// let { sourceMin, sourceMax, currentMin, currentMax, clientPixel, displayPoints } = this.$ctx;
|
|
|
|
// if (data) {
|
|
// // 源点
|
|
// var points = displayPoints;
|
|
// var targetMinHz = currentMin;
|
|
// // 图表带宽范围
|
|
// var scaleMinHz = currentMin;
|
|
// var scaleMaxHz = currentMax;
|
|
// var scaleSpanHz = scaleMaxHz - scaleMinHz;
|
|
// // 多少Hz一个像素
|
|
// var pixelScale = scaleSpanHz / clientPixel;
|
|
|
|
// var markerPosHz = current;
|
|
// // 当前频点 据 开始频点 多少hz
|
|
// var markerSpanHz = markerPosHz - targetMinHz;
|
|
// // 跳过按照前面的频率跳过相应的点
|
|
// var markerPixel = Math.ceil(markerSpanHz / pixelScale);
|
|
// return points[markerPixel];
|
|
// }
|
|
}
|
|
/*
|
|
// 按照真实点的数值获取
|
|
// data = new Uint16Array(data.buffer);//Array.from(,x=>x/256);
|
|
var sourceSpan = sourceMax - sourceMin;
|
|
var sampleFreq = SampleFreqs.find(item=>item > sourceSpan);
|
|
if(sampleFreq === void(0))sampleFreq = SampleFreqs.slice(-1)[0];
|
|
var offset = Math.floor( ( sampleFreq - sourceSpan ) / ( sampleFreq / data.length ) / 2 );
|
|
data = data.slice(offset,data.length - offset );
|
|
var displaySpan = currentMax - currentMin;
|
|
// 源点偏移
|
|
// 算算前面多少频率
|
|
let currentSpan = current - sourceMin;
|
|
// 多少频率一个点
|
|
var pointScale = sourceSpan / data.length ;
|
|
var pixelScale = clientPixel / displaySpan;
|
|
// 跳过按照前面的频率跳过相应的点
|
|
var pointOffset = Math.ceil(currentSpan / pointScale);
|
|
return data[pointOffset];
|
|
*/
|
|
DataExtract.prototype.fill = function (data) {
|
|
if (this.$ctx.paused) return [];
|
|
let { sourceMin, sourceMax, currentMin, currentMax, clientPixel, displayPoints } = this.$ctx;
|
|
|
|
if (displayPoints.length != clientPixel) {
|
|
this.$ctx.displayPoints.length = clientPixel;
|
|
}
|
|
displayPoints.fill(NaN);
|
|
if (data) {
|
|
if (currentMin < 0 && currentMax < 0) {
|
|
return [];
|
|
};
|
|
// data = new Uint16Array(data.buffer);//Array.from(,x=>x/256);
|
|
var sourceSpan = sourceMax - sourceMin;
|
|
var sampleFreq = SampleFreqs.find(item => item > sourceSpan);
|
|
if (sampleFreq === void (0)) sampleFreq = SampleFreqs.slice(-1)[0]
|
|
if (!_Saved) {
|
|
var bytes = new Uint8Array(data.buffer);
|
|
var blob = new Blob([bytes]);
|
|
var a = document.createElement("a");
|
|
|
|
a.title = sampleFreq + "_" + Date.now() + "_" + data.length + "_" + bytes.length + "_.dat";
|
|
a.download = a.title;
|
|
a.href = URL.createObjectURL(blob);
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
URL.revokeObjectURL(a.download);
|
|
_Saved = true;
|
|
}
|
|
var offset = Math.floor((sampleFreq - sourceSpan) / (sampleFreq / data.length) / 2);
|
|
data = data.slice(offset, data.length - offset);//取出偏移量后的数据
|
|
// 源点
|
|
var points = displayPoints;
|
|
|
|
// 源数据范围
|
|
|
|
var sourceMinHz = sourceMin;
|
|
var sourceSpanHz = sourceSpan;
|
|
|
|
|
|
var targetMinHz = currentMin;
|
|
var targetMaxHz = currentMax;
|
|
var targetSpanHz = targetMaxHz - targetMinHz;
|
|
|
|
// 图表带宽范围
|
|
var scaleMinHz = currentMin;
|
|
var scaleMaxHz = currentMax;
|
|
var scaleSpanHz = scaleMaxHz - scaleMinHz;
|
|
|
|
|
|
// 如果 x 轴最大值 小于 源最大值 按照 x 轴的最大值算
|
|
if (scaleMaxHz < targetMaxHz) {
|
|
targetMaxHz = scaleMaxHz;
|
|
}
|
|
// 如果 x 轴最小值 大于 源最小值 按 x 轴的最小值算
|
|
if (scaleMinHz > targetMinHz) {
|
|
targetMinHz = scaleMinHz;
|
|
}
|
|
targetSpanHz = targetMaxHz - targetMinHz;
|
|
|
|
var pointScale = sourceSpanHz / data.length; // 多少Hz一个点
|
|
var pixelScale = this.$ctx.pixelScale = scaleSpanHz / clientPixel; // 多少Hz一个像素
|
|
var offsetHz = (sourceMinHz - scaleMinHz); // 左边隐藏了多少Hz
|
|
var offsetPixel = 0; // 向左偏移多少像素
|
|
let offsetPoint = 0; // 向右偏移了多少点
|
|
// 如果左边有隐藏的频率
|
|
if (offsetHz > 0) {
|
|
offsetPixel = Math.abs(Math.ceil(offsetHz / pixelScale));// 垫上一定的像素
|
|
} else {
|
|
offsetPoint = Math.abs(Math.round(Math.abs(offsetHz) / pointScale));// 刨除出一定的点
|
|
}
|
|
if (offsetPixel > 0) {
|
|
points.fill(NaN, 0, offsetPixel);
|
|
}
|
|
if (offsetPoint > 0) {
|
|
data = data.slice(offsetPoint);
|
|
}
|
|
var i = 0;
|
|
// 当前FFT点数
|
|
var pointPixel = targetSpanHz / pixelScale;
|
|
var targetCount = targetSpanHz / pointScale;
|
|
var array = [];
|
|
if (targetCount > points.length) {//抽帧
|
|
var start = 0;
|
|
for (i = offsetPixel; i < clientPixel; i++) {
|
|
var _offset = i - offsetPixel;
|
|
var _temp = (_offset) * pixelScale;
|
|
let end = Math.ceil(_temp / pointScale);
|
|
var partial = data.slice(start, end);
|
|
|
|
start = end;
|
|
if (partial.length > 0) {
|
|
var val = NaN;
|
|
try {
|
|
val = Math.max(...partial);//数组解构 取出最大值
|
|
} catch (e) {
|
|
console.warn(e);
|
|
}
|
|
points[i] = val;
|
|
} else {
|
|
points[i] = NaN;
|
|
}
|
|
}
|
|
} else {
|
|
// 补帧
|
|
for (i = 0; i < clientPixel - offsetPixel; i++) {
|
|
let dataIndex = Math.ceil(i * pixelScale / pointScale);
|
|
var val = data[dataIndex];
|
|
if (val == -Infinity || isNaN(val) || val === undefined) {
|
|
break;
|
|
} else {
|
|
points[offsetPixel + i] = val;
|
|
}
|
|
}
|
|
//补帧
|
|
}
|
|
return points;
|
|
}
|
|
}
|
|
// 用于展示的点数
|
|
var _DisplayPoints = new Array(1).fill(0);
|
|
DataExtract.prototype.fill2 = function (data, TaskId = 0) {
|
|
let { sourceMin, sourceMax, currentMin, currentMax, clientPixel, displayPoints } = this.$ctx;
|
|
|
|
if (_DisplayPoints.length != clientPixel) {
|
|
_DisplayPoints = new Array(clientPixel);
|
|
}
|
|
_DisplayPoints.fill(NaN);
|
|
if (data) {
|
|
if (currentMin < 0 && currentMax < 0) {
|
|
return [];
|
|
};
|
|
// data = new Uint16Array(data.buffer);//Array.from(,x=>x/256);
|
|
var sourceSpan = sourceMax - sourceMin;
|
|
var displaySpan = currentMax - currentMin;
|
|
// 源点偏移
|
|
var currentOffset = 0;
|
|
var currentSpan = 0;
|
|
var currentSpanMin = sourceMin;
|
|
var currentSpanMax = sourceMax;
|
|
|
|
if (currentMax < currentSpanMax) {
|
|
currentSpanMax = currentMax;
|
|
}
|
|
if (currentMin > currentSpanMin) {
|
|
currentSpanMin = currentMin;
|
|
}
|
|
currentSpan = currentSpanMax - currentSpanMin;
|
|
|
|
currentOffset = (currentMin - sourceMin);
|
|
|
|
var pointScale = sourceSpan / data.length; // 多少带宽一个点
|
|
var pixelScale = clientPixel / displaySpan;
|
|
// 当前FFT点数
|
|
var currentPointCount = currentSpan / sourceSpan * data.length;
|
|
// currentSpan / pointScale + Math.abs(currentOffset) / pointScale;
|
|
|
|
// 轴起始偏移
|
|
let displayOffset = 0;
|
|
let offsetPoint = 0;
|
|
|
|
if (currentOffset < 0) {
|
|
displayOffset = Math.abs(Math.ceil(currentOffset * pixelScale))
|
|
} else {
|
|
offsetPoint = Math.abs(Math.round(currentOffset / pointScale))
|
|
}
|
|
if (displayOffset > 0) {
|
|
_DisplayPoints.fill(NaN, 0);
|
|
}
|
|
var i = 0;
|
|
if (currentPointCount > _DisplayPoints.length) {
|
|
var start = 0;
|
|
for (i = 0; i < clientPixel - displayOffset; i++) {
|
|
let end = Math.round(offsetPoint + (i) / pixelScale / pointScale);
|
|
var partial = data.slice(start, end);
|
|
start = end;
|
|
if (partial.length > 0) {
|
|
var val = Math.max(...partial);
|
|
_DisplayPoints[displayOffset + i] = val;
|
|
} else if (start > 0 && end > 0) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
} else {
|
|
// 补帧
|
|
for (i = 0; i < clientPixel - displayOffset; i++) {
|
|
|
|
let dataIndex = Math.round(offsetPoint + (i) / pixelScale / pointScale);
|
|
var val = data[dataIndex];
|
|
if (val == -Infinity || isNaN(val) || val === undefined) {
|
|
break;
|
|
} else {
|
|
_DisplayPoints[displayOffset + i] = val;
|
|
}
|
|
}
|
|
//补帧
|
|
}
|
|
return _DisplayPoints;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var DefaultAxisYThickness = 65;
|
|
const formatFreq = (function (_units) {
|
|
return function (value, count = 6) {
|
|
var pow = 0;
|
|
var _value = Math.abs(value);
|
|
if (_value >= 1000) {
|
|
pow = Math.floor(Math.log(_value) / Math.log(1000));
|
|
if (pow > 3) pow = 3;
|
|
value = value / Math.pow(1000, pow);
|
|
}
|
|
return value.toFixed(count) + _units[pow] || "G";
|
|
}
|
|
})(["", "K", "M", "G"]);
|
|
let {
|
|
AutoCursorModes,
|
|
AxisTickStrategies,
|
|
lightningChart,
|
|
emptyLine,
|
|
emptyFill,
|
|
emptyTick,
|
|
UIDirections,
|
|
UIElementBuilders,
|
|
MarkerBuilders,
|
|
transparentFill,
|
|
UIVisibilityModes,
|
|
ColorRGBA,
|
|
ColorHEX,
|
|
UIButtonPictures,
|
|
ColorHSV,
|
|
UIDraggingModes,
|
|
UILayoutBuilders,
|
|
UIBackgrounds,
|
|
SolidFill,
|
|
SolidLine,
|
|
LegendBoxBuilders,
|
|
translatePoint,
|
|
PointMarkers,
|
|
MouseStyles,
|
|
UIOrigins,
|
|
|
|
synchronizeAxisIntervals
|
|
} = lcjs;
|
|
const Marker = (function () {
|
|
let MarkerXYBuilder = MarkerBuilders.XY.setPointMarker(UIBackgrounds.Diamond).setResultTableBackground(UIBackgrounds.Pointer)
|
|
.addStyler(marker => {
|
|
marker.setPointMarker(point => point.setSize({ x: 10, y: 10 })
|
|
.setFillStyle(new SolidFill({ color: ColorHEX("#F00") }))
|
|
.setFillStyleHighlight(new SolidFill({ color: ColorHEX("#F00") }))
|
|
.setHighlighted(false)
|
|
)
|
|
.setGridStrokeXCut(true)
|
|
.setGridStrokeYCut(false)
|
|
.setResultTable(table => {
|
|
return table.setOrigin(UIOrigins.CenterBottom).setMargin({ bottom: 5 })
|
|
.setBackground(bg => bg.setDirection(UIDirections.Down).setPointerAngle(80).setPointerLength(10))//.setFillStyle(emptyFill).setStrokeStyle(emptyLine))
|
|
});
|
|
let TickStyle = tick => {
|
|
return tick.setTextFillStyle(new SolidFill({ color: ColorHEX('#FFF') })).setTextFont(fontSettings => fontSettings.setSize(12))
|
|
}
|
|
let StrokeStyle = new SolidLine({ thickness: .5, fillStyle: new SolidFill({ color: ColorHEX('#FFF') }) });
|
|
marker
|
|
.setTickMarkerX(TickStyle).setTickMarkerY(TickStyle)
|
|
.setGridStrokeXStyle(StrokeStyle).setGridStrokeYStyle(StrokeStyle);
|
|
return marker;
|
|
});
|
|
function Marker(line, opts) {
|
|
let { name, label, color, } = opts;
|
|
this.name = name;
|
|
this.$opts = opts;
|
|
this.$line = line;
|
|
this.$chart = this.$line.$chart;
|
|
|
|
var { start, end } = this.$chart.DisplayAxisX.getInterval();
|
|
var interval = this.$chart.DefaultAxisY.getInterval();
|
|
var position = { x: start + (end - start) / 2, y: interval.end - Math.abs(interval.end - interval.start) / 2 };
|
|
|
|
const target = this.target = this.$chart.target.addChartMarkerXY(MarkerXYBuilder, this.$chart.DisplayAxisX, this.$chart.DefaultAxisY).setPosition(position)
|
|
/*
|
|
var displayPosition = position;
|
|
position = this.$chart.Display2Default(position);
|
|
const target = window.marker = this.target = this.$line.target.addMarker(MarkerXYBuilder,this.$chart.DisplayAxisX,this.$chart.DefaultAxisY).setPosition(position);
|
|
*/
|
|
target.getResultTable().setContent([[label]]);
|
|
target.$owner = this;
|
|
target.setPointMarker(point => point.setFillStyle(new SolidFill({ color: ColorHEX(opts.color) })));
|
|
|
|
|
|
/*
|
|
let keydown = false;
|
|
let checkPosition = (current)=>{
|
|
if(current.x != position.x){
|
|
position = this.$chart.Display2Default(displayPosition);
|
|
target.setPosition(position)
|
|
}
|
|
};
|
|
target.getPointMarker().onMouseDown(function(){
|
|
keydown = true;
|
|
});
|
|
target.getPointMarker().onMouseUp(function(){
|
|
keydown = false;
|
|
});
|
|
target.onPositionChange((sender,current)=>{
|
|
if(keydown){
|
|
document.title = current.x;
|
|
displayPosition = this.$chart.Default2Display(current);
|
|
return;
|
|
}
|
|
checkPosition(current);
|
|
})
|
|
*/
|
|
target.setGridStrokeXVisibility(UIVisibilityModes.never)
|
|
.setGridStrokeYVisibility(UIVisibilityModes.never)
|
|
.setTickMarkerXVisibility(UIVisibilityModes.always)
|
|
.setTickMarkerYVisibility(UIVisibilityModes.never);
|
|
}
|
|
Marker.prototype.update = function (data, cache) {
|
|
var original = this.target.getPosition();
|
|
var value = this.$chart.TakeData(original.x, data, cache);
|
|
if (value) {
|
|
original.y = value;
|
|
}
|
|
this.target.setPosition(original);
|
|
/*
|
|
var dest = this.$chart.Display2Default(this.target.getPosition());
|
|
var
|
|
original.y = data[Math.floor(dest.x)];
|
|
if(original.y === undefined){
|
|
debugger;
|
|
}
|
|
// chartMarker.getResultTable().setContent([[["X:",original.x,"Y:",original.y].join("")]]);
|
|
|
|
|
|
// this.target.setPosition(this.target.getPosition());
|
|
*/
|
|
}
|
|
return Marker;
|
|
})();
|
|
const Line = (function () {
|
|
function Line(opts, chart) {
|
|
let { name, label, color } = opts;
|
|
let target = chart.target.addLineSeries({ allowDataGrouping: true }).setName(label);
|
|
target.setStrokeStyle(stroke => {
|
|
return stroke.setThickness(2).setFillStyle(new SolidFill({ color: ColorHEX(color) }))
|
|
});
|
|
this.name = name;
|
|
this.$opts = opts;
|
|
this.$markers = [];
|
|
this.$chart = chart;
|
|
this.target = target;
|
|
this.$data = [];
|
|
}
|
|
Line.prototype.update = function (data) {
|
|
this.target.clear();
|
|
this.target.addArrayY(data);
|
|
this.$data = data;
|
|
var extract = this.$chart.DataExtract;
|
|
let { clientPixel, currentMin, pixelScale } = extract.$ctx;
|
|
this.$markers.forEach(marker => {
|
|
var original = marker.target.getPosition();
|
|
// 当前频点 据 开始频点 多少hz
|
|
var spanHz = original.x - currentMin;
|
|
// 跳过按照前面的频率跳过相应的点
|
|
var index = Math.ceil(spanHz / pixelScale);
|
|
var value = data[index];
|
|
if (value != undefined && !isNaN(value)) {
|
|
original.y = value;
|
|
marker.target.setPosition(original);
|
|
}
|
|
})
|
|
}
|
|
Line.prototype.AddMarker = function (opts) {
|
|
var marker = new Marker(this, opts)
|
|
this.$markers.push(marker);
|
|
return marker;
|
|
};
|
|
Line.prototype.AddRelatedMarkers = function (...arr) {
|
|
return arr.map(opts => {
|
|
return this.AddMarker(opts);
|
|
})
|
|
};
|
|
/*
|
|
Line.prototype.AddMarker = function(opts){
|
|
var marker = this.$chart.target.addChartMarkerXY()
|
|
.setPosition({ x: 60, y: -80 })
|
|
var table = marker.getResultTable();
|
|
marker.onPositionChange(function(target,position){
|
|
table.setContent([[Object.values(position).join(",")],["X:1","Y:2"]])
|
|
});
|
|
}
|
|
*/
|
|
return Line;
|
|
})();
|
|
|
|
|
|
UIElementBuilders.CheckBox = UIElementBuilders.CheckBox
|
|
.setPictureOff(UIButtonPictures.Rectangle)
|
|
.setPictureOn(UIButtonPictures.Rectangle)
|
|
.addStyler((checkBox) => checkBox.setOn(false).setPadding(5));
|
|
|
|
|
|
const MarkerBuilder = MarkerBuilders.XY
|
|
.setPointMarker(UIBackgrounds.Diamond)
|
|
.setResultTableBackground(UIBackgrounds.Diamond)
|
|
.addStyler(marker =>
|
|
marker.setPointMarker(point => point.setSize({ x: 5, y: 5 }))
|
|
.setResultTable(table => table.setOrigin(UIOrigins.CenterBottom).setMargin({ bottom: 0 }).setBackground(arrow => arrow.setDirection(UIDirections.Down)))
|
|
.setGridStrokeXCut(true).setAutoFitStrategy(undefined)
|
|
)
|
|
|
|
|
|
//#region 折线图
|
|
function LineChart(opts) {
|
|
opts = opts || {};
|
|
let { container } = opts;
|
|
let _Context = {
|
|
Divide: 1,
|
|
Lines: {},
|
|
Cache: [],
|
|
Data: []
|
|
};
|
|
let _expose = {};
|
|
let _Methods = {};
|
|
var _DataExtract = _expose.DataExtract = new DataExtract();
|
|
// Initialize _Chart.
|
|
let _Chart = lightningChart({
|
|
// 0 左键 1 中间 2 右键
|
|
|
|
// overrideInteractionMouseButtons: {
|
|
// axisXYZoomMouseButton: 2, // 框选放大
|
|
// chartXYPanMouseButton: 2, // 按住移动
|
|
// chartXYRectangleZoomFitMouseButton: 0, // 按住框选
|
|
// axisXYPanMouseButton: 0, // 拖动XY轴
|
|
// },
|
|
|
|
}).ChartXY({ container });
|
|
_Chart
|
|
.setTitle(false)
|
|
.disableAnimations()
|
|
//.setAutoCursorMode(AutoCursorModes.onHover).setSeriesBackgroundFillStyle(emptyFill)
|
|
.setPadding({ left: 0, top: 0, right: 5, bottom: 5 });
|
|
//_Chart.setMouseInteractionPan(false);
|
|
|
|
|
|
_Chart.setMouseInteractionWheelZoom(false);
|
|
// _Chart.setMouseInteractionRectangleZoom(false);
|
|
// _Chart.setMouseInteractionRectangleFit(false);
|
|
// _Chart.setZoomingRectangleFillStyle(new SolidFill({ color: ColorRGBA( 0, 255, 10,100 ) }));
|
|
|
|
|
|
let _DefaultAxisX = _Chart.getDefaultAxisX();
|
|
let _DefaultAxisY = _Chart.getDefaultAxisY();
|
|
let _DisplayAxisX = _Chart.addAxisX({ type: "linear-highPrecision" }).setInterval(0, 0, false, true);
|
|
// let _DisplayAxisX = _DefaultAxisX;
|
|
_Chart.onSeriesBackgroundSelect && _Chart.onSeriesBackgroundSelect(function () {
|
|
console.log("select", arguments);
|
|
});
|
|
const _DefaultAxes = { x: _DefaultAxisX, y: _DefaultAxisY };
|
|
const _DisplayAxes = { x: _DisplayAxisX, y: _DefaultAxisY };
|
|
Object.assign(_expose, { target: _Chart });
|
|
Object.assign(_Methods, {
|
|
AddLine(opts) {
|
|
let { name } = opts;
|
|
var line = new Line(opts, _expose);
|
|
_Context.Lines[name] = (line);
|
|
return line;
|
|
},
|
|
AddCheckBoxGroup(items, handle) {
|
|
const group = _Chart.addUIElement(UILayoutBuilders.Row.setBackground(UIBackgrounds.Rectangle))
|
|
.setDraggingMode(UIDraggingModes.notDraggable).setOrigin(UIOrigins.RightTop)
|
|
.setPosition({ x: 99, y: 99 }).setBackground(bg => bg.setStrokeStyle(emptyLine).setFillStyle(emptyFill));
|
|
items.forEach(opts => {
|
|
let { name, label, color } = opts;
|
|
var checkbox = group.addElement(UIElementBuilders.CheckBox).setText(label);
|
|
checkbox.onSwitch(handle);
|
|
});
|
|
return group;
|
|
},
|
|
AddLegendBox(handle, events = false) {
|
|
const group = _Chart.addUIElement(UILayoutBuilders.Row.setBackground(UIBackgrounds.Rectangle))
|
|
.setDraggingMode(UIDraggingModes.notDraggable).setOrigin(UIOrigins.RightTop)
|
|
.setPosition({ x: 99, y: 99 }).setBackground(bg => bg.setStrokeStyle(emptyLine)); //.setFillStyle(emptyFill)
|
|
Object.entries(_Context.Lines).forEach(([name, line], index) => {
|
|
var line = _Context.Lines[name];
|
|
var checkbox = group.addElement(UIElementBuilders.CheckBox).setText(line.target.getName());
|
|
checkbox.setOn(!line.target.isDisposed());
|
|
if (index == 0) {
|
|
checkbox.setMouseInteractions(false);
|
|
} else {
|
|
checkbox.setMouseInteractions(events);
|
|
}
|
|
checkbox.onSwitch((target, state) => {
|
|
if (handle && handle(checkbox, line)) {
|
|
return;
|
|
}
|
|
if (state) {
|
|
line.target.restore();
|
|
} else {
|
|
line.target.dispose();
|
|
}
|
|
});
|
|
});
|
|
|
|
return group;
|
|
}
|
|
})
|
|
|
|
Object.assign(_Methods, {
|
|
Divide(value) {
|
|
if (value != undefined) _Context.Divide = value;
|
|
return _Context.Divide;
|
|
},
|
|
AddData(name, data) {
|
|
var _Line = _Context.Lines[name];
|
|
if (_Line) { _Line.Data = data; }
|
|
},
|
|
});
|
|
Object.assign(_Methods, {
|
|
SetRangeX(start, end) {
|
|
_DisplayAxisX.setInterval(start, end, false, true,);
|
|
_DataExtract.update({ sourceMin: start, sourceMax: end, currentMin: start, currentMax: end });
|
|
},
|
|
SetRangeY(start, end) {
|
|
_DefaultAxisY.setInterval(end, start, false, true);
|
|
}
|
|
});
|
|
//#region 设置 展示X轴
|
|
const _DisplayAxisXScaleChange = (initial) => {
|
|
let { start, end } = _DisplayAxisX.getInterval();
|
|
requestAnimationFrame(() => {
|
|
let { start, end } = _DisplayAxisX.getInterval();
|
|
_DataExtract.update({ currentMin: start, currentMax: end });
|
|
});
|
|
};
|
|
_DisplayAxisX.onAxisInteractionAreaMouseDoubleClick(function (e) {
|
|
// e.setInterval(...e.range(), false, true);
|
|
});
|
|
_DisplayAxisX.onScaleChange(_DisplayAxisXScaleChange);
|
|
_DisplayAxisX.setAnimationScroll(false);
|
|
//#endregion
|
|
|
|
|
|
|
|
var _ClientToDefault = function ({ x, y }) {
|
|
return _Chart.engine.clientLocation2Engine(x, y);
|
|
};
|
|
var _Default2Display = function ({ x, y }, scale) {
|
|
if (!scale) scale = _Chart.pixelScale;
|
|
return translatePoint({ x, y }, scale, _DisplayAxes);
|
|
};
|
|
var _Display2Default = function ({ x, y }, scale) {
|
|
if (!scale) scale = _Chart.pixelScale;// _DefaultAxes;//
|
|
return translatePoint({ x, y }, _DisplayAxes, scale);
|
|
};
|
|
var _Client2Display = function ({ x, y }) {
|
|
var enginePoint = _Chart.engine.clientLocation2Engine(x, y);
|
|
return translatePoint(enginePoint, _Chart.pixelScale, _DisplayAxes);
|
|
};
|
|
Object.assign(_Methods, {
|
|
TakeData(freq, data, cache,) {
|
|
return _DataExtract.take(freq, data, cache);
|
|
},
|
|
Client2Default: _ClientToDefault,
|
|
Default2Display: _Default2Display,
|
|
Client2Display: _Client2Display,
|
|
Display2Default: _Display2Default
|
|
});
|
|
|
|
//#region 设置 默认Y轴
|
|
_DefaultAxisY
|
|
.setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
|
|
strategy
|
|
.setCursorFormatter((value) => value.toFixed(3))
|
|
.setMajorTickStyle((style) => strategy.getMinorTickStyle())
|
|
);
|
|
// .setThickness(DefaultAxisYThickness);
|
|
//#endregion
|
|
|
|
//#region 添加 UI 组件
|
|
|
|
//#region 按刷新率渲染
|
|
let _Render = () => {
|
|
let ctx = { last: performance.now(), offset: 0, period: 50 };
|
|
function rAF() {
|
|
let now = performance.now();
|
|
let span = now - ctx.last;
|
|
if (span > ctx.period) {
|
|
ctx.offset = span % ctx.period;
|
|
ctx.last = now - ctx.offset;
|
|
Object.keys(_Context.Lines).forEach(name => {
|
|
let line = _Context.Lines[name];
|
|
let data = line.Data;
|
|
// delete line.Data;
|
|
|
|
if (data) {
|
|
|
|
data = _DataExtract.fill(data);
|
|
|
|
if (_Context.Divide !== 1) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
data[i] = data[i] / _Context.Divide;
|
|
}
|
|
}
|
|
line.update(data);
|
|
|
|
return;
|
|
for (var i = 0; i < data.length; i++) {
|
|
line.target.add({ x: i, y: _Context.Cache[i] });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
requestAnimationFrame(rAF);
|
|
}
|
|
requestAnimationFrame(rAF);
|
|
};
|
|
//#endregion
|
|
_Render();
|
|
{
|
|
//#region 设置 默认X轴
|
|
_DefaultAxisX
|
|
.setMouseInteractions(false)
|
|
.setChartInteractionPanByDrag(false)
|
|
.setChartInteractionZoomByWheel(false)
|
|
.setChartInteractionZoomByDrag(false)
|
|
.setChartInteractionFitByDrag(false)
|
|
.setAnimationScroll(false)
|
|
.setThickness(0)
|
|
.setStrokeStyle(emptyLine)
|
|
.setTickStrategy(AxisTickStrategies.Numeric, (strategy) => {
|
|
return strategy
|
|
.setCursorFormatter(function (value, range) {
|
|
var point = translatePoint(
|
|
{ x: value, y: 0 },
|
|
_DefaultAxes,
|
|
_DisplayAxes
|
|
);
|
|
return Math.floor(point.x).toLocaleString();
|
|
})
|
|
.setMajorTickStyle((major) =>
|
|
major.setGridStrokeStyle(emptyLine)
|
|
.setLabelFillStyle(transparentFill)
|
|
.setTickStyle(emptyLine)
|
|
)
|
|
.setMinorTickStyle((minor) =>
|
|
minor
|
|
.setGridStrokeStyle(emptyLine)
|
|
.setLabelFillStyle(transparentFill)
|
|
.setTickStyle(emptyLine)
|
|
);
|
|
});
|
|
_DefaultAxisX.zoom = false;
|
|
const _DefaultAxisXScaleChange = (sender, width, height, engineWidth) => {
|
|
requestAnimationFrame(() => {
|
|
var clientPixel = Math.floor(engineWidth - _DefaultAxisY.getHeight());
|
|
let Ptn = window.innerWidth;//取点点数
|
|
_DefaultAxisX.setInterval(0, clientPixel, false, true);
|
|
_DataExtract.update({ clientPixel });
|
|
});
|
|
};
|
|
_Chart.onResize(_DefaultAxisXScaleChange);
|
|
//#endregion
|
|
_Methods.SetRangeY(127, -127);
|
|
}
|
|
|
|
{
|
|
_expose.Context = {};
|
|
Object.keys(_Context).forEach((key) => {
|
|
Object.defineProperty(_expose.Context, key, {
|
|
enumerable: true,
|
|
get() {
|
|
return _Context[key];
|
|
},
|
|
});
|
|
});
|
|
}
|
|
Object.keys(_Methods).forEach((key) => {
|
|
Object.defineProperty(_expose, key, {
|
|
enumerable: true,
|
|
get() {
|
|
return _Methods[key];
|
|
},
|
|
});
|
|
});
|
|
|
|
Object.assign(_expose, {
|
|
DisplayAxisX: _DisplayAxisX,
|
|
DefaultAxisX: _DefaultAxisX,
|
|
DefaultAxisY: _DefaultAxisY,
|
|
});
|
|
requestAnimationFrame(function () {
|
|
let range = _Chart.engine.scale.getInnerIntervalPixels();
|
|
_DefaultAxisX.setInterval(0, range.x, false, true);
|
|
_DisplayAxisX.setInterval(0, range.x, false, true);
|
|
});
|
|
/*
|
|
*/
|
|
function SetTickStyle(tick) {
|
|
return tick.setLabelFont((font) => font.setWeight('normal').setSize(10).setStyle('normal').setFamily('Arial').setVariant(true))
|
|
}
|
|
|
|
|
|
|
|
[_DefaultAxisY, _DisplayAxisX].map(_Axis => {
|
|
_Axis.setTickStrategy(AxisTickStrategies.Numeric, (strategy) => {
|
|
return strategy
|
|
.setMajorTickStyle(SetTickStyle)
|
|
.setMinorTickStyle(SetTickStyle)
|
|
});
|
|
})
|
|
|
|
_expose.DargRectangle = () => {
|
|
_Chart.onSeriesBackgroundMouseDragStart(function (obj, event, button) {
|
|
console.log('series mouse drag start', arguments);
|
|
})
|
|
_Chart.onSeriesBackgroundMouseDragStop(function (obj, event, button, start) {
|
|
console.log('series mouse drag stop', arguments);
|
|
})
|
|
_Chart.onSeriesBackgroundMouseDrag(function (obj, event, button, start, delta) {
|
|
// console.log('series mouse drag ',arguments);
|
|
})
|
|
}
|
|
_Chart.onSeriesBackgroundMouseDragStop(function (obj, event, button, start) {
|
|
if (button == 2) {
|
|
if (event.x == start.x && event.y == start.y) {
|
|
console.log('contextmenu');
|
|
}
|
|
}
|
|
})
|
|
// _expose.DargRectangle();
|
|
return _expose;
|
|
}
|
|
return LineChart;
|
|
}); |