4

我们如何在将数据添加到系列时动态更改散点图的大小和形状

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

我知道我们可以通过动态改变颜色

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

有没有办法像椭圆系列一样动态改变大小？

在此处输入图像描述

4

1 回答 1

4

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

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

于 2020-06-08T11:26:41.330 回答