動態更改散點圖大小和形狀 - LightningChart JS

Question

我們如何在將數據添加到系列時動態更改散點圖的大小和形狀

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

我知道我們可以通過動態改變顏色

const fillStyle = new IndividualPointFill({ color: ColorHSV(0) })

有沒有辦法像橢圓系列一樣動態改變大小？

Answer 1

Lightning Chart JS v2.0.0 或更高版本

可以為每個點單獨設置點大小和旋轉。 要啟用對單個尺寸或旋轉的支持，請調用series.setIndividualPointSizeEnabled(true)和/或series.setIndividualPointRotationEnabled(true)

const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setIndividualPointSizeEnabled(true)

啟用單個點大小時，可以通過為每個點的size字段提供值來設置點大小。

series.add([
    { x: 0, y: 0, size: 1 },
    { x: 1, y: 0, size: 5 },
    { x: 2, y: 0, size: 10 },
    { x: 3, y: 0, size: 15 },
    { x: 4, y: 0, size: 20 },
    { x: 5, y: 0, size: 25 },
])

旋轉以類似的方式工作，可以通過為每個點的rotation字段提供值來設置點旋轉。 旋轉以弧度定義。

const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setIndividualPointSizeEnabled(true)

series.add([
    { x: 0, y: 3, rotation: 0 },
    { x: 1, y: 3, rotation: Math.PI / 4 },
    { x: 2, y: 3, rotation: Math.PI / 2 },
    { x: 3, y: 3, rotation: Math.PI },
    { x: 4, y: 3, rotation: Math.PI * 3/2 },
    { x: 5, y: 3, rotation: Math.PI * 2 },
])

單獨的點大小和旋轉也可以同時使用。

const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setIndividualPointSizeEnabled(true)
    .setIndividualPointRotationEnabled(true)

series4.add([
    { x: 0, y: 3, size: 1, rotation: 0 },
    { x: 1, y: 3, size: 5, rotation: Math.PI / 4 },
    { x: 2, y: 3, size: 10, rotation: Math.PI / 2 },
    { x: 3, y: 3, size: 15, rotation: Math.PI },
    { x: 4, y: 3, size: 20, rotation: Math.PI * 3/2 },
    { x: 5, y: 3, size: 25, rotation: Math.PI * 2 },
])

點形狀還不能單獨更改。

---

閃電圖表 JS v1.x：

LightningChart JS 目前不支持單獨更改點的形狀或大小。 這是我們想要開發但尚未決定何時或是否會完成的功能。

作為一種解決方法，您可以對不同的形狀使用多個點系列。 因此，您可以為每個點形狀（正方形、三角形、圓形）設置一個系列，然后根據您要用於確定形狀的因素將這些點添加到不同的系列中。 我知道這不是最佳解決方案，但這是我現在能想到的唯一解決方案。