EllipseSeries 中的 Maxpointcount - LightningChart JS

Question

我可以通過以下設置散點圖中的最大點數來保存 memory

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

Answer 1

EllipseSeries不支持setMaxPointCount功能。 系列類型並不意味着與大量數據一起使用，因此它沒有針對PointSeries 、 LineSeries和其他更基本的系列類型存在的一些優化。

您可以通過在要從EllipseSeries中刪除的每個橢圓上調用EllipseFigure.dispose()手動從EllipseSeries中刪除點。 調用dispose將釋放用於渲染橢圓的所有資源，並在內部刪除對橢圓的所有引用。 如果在調用 dispose 后在 out 自己的代碼中刪除所有對橢圓的引用，則橢圓使用的所有 memory 將被釋放。

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>