>我可以通过以下方式在散点图中设置最大点数来节省内存
const pointz = chart.addPointSeries({ pointShape: PointShape.Circle })
.setName('Kuopio')
.setPointFillStyle(fillStyles[0])
.setPointSize(pointSize)
.setMaxPointCount(10000);
但是我如何为EllipseSeries设置相同的内容？
我没有看到任何像setMaxPointCount这样的方法EllipseSeries- https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/ellipseseries.html#add
EllipseSeries不支持setMaxPointCount功能。序列类型并不意味着用于大量数据，因此它没有针对PointSeries、LineSeries和其他更基本的序列类型存在的一些优化。
可以通过在要从EllipseSeries中删除的每个椭圆上调用EllipseFigure.dispose()来手动从EllipseSeries中删除点。调用dispose将释放用于呈现椭圆的所有资源，并在内部删除对椭圆的所有引用。如果在调用 dispose 后删除对椭圆的所有引用，则会释放椭圆使用的所有内存。
let ellipse = ellipseSeries.add({x:0,y:0,radiusX: 10,radiusY:10}) // ellipse is rendered here
ellipse.dispose() // ellipse is no longer rendered but some memory is still used.
ellipse = undefined // last reference to the ellipse was removed, all memory is freed
// Extract required parts from LightningChartJS.
const {
lightningChart,
SolidFill,
SolidLine,
ColorRGBA,
emptyFill,
emptyTick,
FontSettings,
AutoCursorModes,
Animator,
AnimationEasings,
UIDraggingModes,
UIOrigins,
ColorPalettes
} = lcjs
// Custom callback template.
const forEachIn = (object, clbk) => { const obj = {}; for (const a in object) obj[a] = clbk(object[a]); return obj }
// Define colors to configure chart and bubbles.
const colors = {
background: ColorRGBA(255, 255, 255),
graphBackground: ColorRGBA(220, 255, 255),
title: ColorRGBA(0, 100, 0),
subTitle: ColorRGBA(0, 100, 0),
bubbleBorder: ColorRGBA(0, 0, 0),
bubbleFillPalette: ColorPalettes.fullSpectrum(100)
}
// Define font settings.
const fonts = {
title: new FontSettings({
size: 40,
weight: 400
})
}
// Create and subtitle with the same font settings, except font-size.
fonts.subTitle = fonts.title.setSize(20)
// Create solid fill styles for defined colors.
const solidFillStyles = forEachIn(colors, (color) => new SolidFill({ color }))
// Create chart with customized settings
const chart = lightningChart().ChartXY({})
.setBackgroundFillStyle(solidFillStyles.background)
.setChartBackgroundFillStyle(solidFillStyles.graphBackground)
.setTitle('Custom Styled Chart')
.setTitleFont(fonts.title)
.setTitleFillStyle(solidFillStyles.title)
.setTitleMarginTop(6)
.setTitleMarginBottom(0)
.setPadding({ left: 5, right: 5, top: 30, bottom: 30 })
.setAutoCursorMode(AutoCursorModes.disabled)
.setMouseInteractionRectangleZoom(undefined)
.setMouseInteractionRectangleFit(undefined)
.setMouseInteractions(false)
// Get axes.
const axes = {
bottom: chart.getDefaultAxisX(),
left: chart.getDefaultAxisY(),
top: chart.addAxisX(true),
right: chart.addAxisY(true).setChartInteractions(false)
}
chart.addUIElement(undefined, { x: chart.uiScale.x, y: axes.right.scale })
.setPosition({ x: 50, y: 10 })
.setOrigin(UIOrigins.CenterBottom)
.setMargin({ bottom: 10 })
.setText('- With Bubbles -')
.setFont(fonts.subTitle)
.setTextFillStyle(solidFillStyles.subTitle)
.setDraggingMode(UIDraggingModes.notDraggable)
// Axis mutator.
const overrideAxis = (axis) => axis
.setTickStyle(emptyTick)
.setTitleMargin(0)
.setNibStyle(line => line.setFillStyle(emptyFill))
.setMouseInteractions(undefined)
// Override default configurations of axes.
for (const axisPos in axes)
overrideAxis(axes[axisPos]);
[axes.bottom, axes.left].forEach(axis => axis.setInterval(-100, 100).setScrollStrategy(undefined))
const bubblePx = {
x: axes.bottom.scale.getPixelSize(),
y: axes.left.scale.getPixelSize()
}
// Create instance of ellipse series to draw bubbles.
const ellipseSeries = chart.addEllipseSeries()
let bubbleCount = 0
// Handler of dragging bubbles.
const bubbleDragHandler = (figure, event, button, startLocation, delta) => {
const prevDimensions = figure.getDimensions()
figure.setDimensions(Object.assign(prevDimensions, {
x: prevDimensions.x + delta.x * figure.scale.x.getPixelSize(),
y: prevDimensions.y + delta.y * figure.scale.y.getPixelSize()
}))
}
// Create resizeBubble array and sizeArray to store the values separately
const resizeBubble = []
const sizeArray = []
// Create a single bubble to visualize in specific coordinates and specified size.
const addBubble = (pos, size) => {
const radius = size * 10
const borderThickness = 1 + size * 1.0
const color = colors.bubbleFillPalette(Math.round(Math.random() * 99))
const fillStyle = new SolidFill({ color })
const strokeStyle = new SolidLine({ fillStyle: solidFillStyles.bubbleBorder, thickness: borderThickness })
const figure = ellipseSeries.add({
x: pos.x,
y: pos.y,
radiusX: radius * bubblePx.x,
radiusY: radius * bubblePx.y
})
.setFillStyle(fillStyle)
.setStrokeStyle(strokeStyle)
// Make draggable by mouse.
figure.onMouseDrag(bubbleDragHandler)
bubbleCount++
return figure
}
// Create an event to handle the case when user resizes the window, the bubble will be automatically scaled
chart.onResize(() => {
for (let i = 0; i <= bubbleMaxCount - 1; i++) {
const newBubble = resizeBubble[i].getDimensions()
resizeBubble[i].setDimensions({
x: newBubble.x,
y: newBubble.y,
radiusX: axes.bottom.scale.getPixelSize() * sizeArray[i] * 10,
radiusY: axes.left.scale.getPixelSize() * sizeArray[i] * 10
})
}
})
// Create a single bubble to visualize in random coordinates and with random size.
const addRandomBubble = () => {
const pos = {
x: Math.random() * 200 - 100,
y: Math.random() * 200 - 100
}
const size = 1 + Math.random() * 7.0
sizeArray.push(size)
resizeBubble.push(addBubble(pos, size))
}
// Amount of bubbles to render.
const bubbleMaxCount = 100
// Animate bubbles creation.
Animator(() => undefined)(2.5 * 1000, AnimationEasings.ease)([[0, bubbleMaxCount]], ([nextBubbleCount]) => {
while (bubbleCount < nextBubbleCount)
addRandomBubble()
})
// dispose all ellipses that have been added before the timeout expires.
setTimeout(()=>{
for(let i =0; i < resizeBubble.length; i++){
resizeBubble[i].dispose()
}
}, 2000)<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>