517 lines
18 KiB
JavaScript
517 lines
18 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) {
|
|
|
|
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;
|
|
// 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 = {};
|
|
// 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窗体内的鼠标的滚动开启
|
|
//_Chart.setMouseInteractionRectangleZoom(true);//设置窗体内的框选开启
|
|
// _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 () {
|
|
});
|
|
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,);
|
|
},
|
|
SetRangeY(start, end) {
|
|
_DefaultAxisY.setInterval(end, start, false, true);
|
|
}
|
|
});
|
|
//#region 设置 展示X轴
|
|
const _DisplayAxisXScaleChange = (initial) => {
|
|
vm.setFFTPixEtracteParam();//设置扫频的抽取的截止频率
|
|
requestAnimationFrame(() => {
|
|
let { start, end } = _DisplayAxisX.getInterval();
|
|
// if(start<600000000){
|
|
// _DisplayAxisX.setInterval(600000000, end, false, true,);
|
|
// }
|
|
// if(end>40000000000){
|
|
// _DisplayAxisX.setInterval(start, 40000000000, false, true,);
|
|
// }
|
|
|
|
});
|
|
};
|
|
_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, {
|
|
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: 280 };//此处为设置数据刷新率 数值越大刷新越低
|
|
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) {
|
|
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());
|
|
_DefaultAxisX.setInterval(0, clientPixel, false, true);
|
|
});
|
|
vm.setFFTPixEtracteParam();//设置扫频的抽取的截止频率
|
|
};
|
|
_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;
|
|
}); |