动态更改散点图大小和形状 - 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) and/or 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 目前不支持单独更改点的形状或大小。这是我们想要开发的功能，但尚未决定何时或是否完成。

作为解决方法，您可以对不同的形状使用多个点系列。因此，您可以为每个点形状（正方形、三角形、圆形）创建一个系列，然后根据您要用于确定形状的因素将这些点添加到不同的系列。我知道这不是最佳解决方案，但这是我目前能想到的唯一解决方案。

动态更改散点图大小和形状 - LightningChart JS

Change Scatter Chart Size and shape dynamically - LightningChart JS

javascript

lightningchart