javascript - 动态更改散点图大小和形状 - 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 目前不支持单独更改点的形状或大小。这是我们想要开发但尚未决定何时或是否会完成的功能。
作为一种解决方法，您可以对不同的形状使用多个点系列。因此，您可以为每个点形状(正方形、三 Angular 形、圆形)设置一个系列，然后根据您要用于确定形状的因素将这些点添加到不同的系列中。我知道这不是最佳解决方案，但这是我现在能想到的唯一解决方案。