EllipseSeries 中的 Maxpointcount - LightningChart JS

Question

我可以通过以下设置散点图中的最大点数来节省内存

const pointz = chart.addPointSeries({ pointShape: PointShape.Circle })
    .setName('Kuopio')
    .setPointFillStyle(fillStyles[0])
    .setPointSize(pointSize)
    .setMaxPointCount(10000);

但是如何为 EllipseSeries 设置相同的值？

对于 EllipseSeries - https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/ellipseseries.html#add

，我没有看到像 setMaxPointCount 这样的方法

Answer 1

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>

EllipseSeries 中的 Maxpointcount - LightningChart JS

Maxpointcount in EllipseSeries - LightningChart JS

javascript

lightningchart