为 Lightning 图表中的 PointSeries 添加边框并动态更改颜色

Question

我使用下面的代码

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

创建如下所示的点图

有什么办法可以给这个圈子添加边框颜色吗？以及如何单独更改个别颜色谢谢。

我试过了，但是没有改变颜色

 pointz.add({ x: xVal, y: yVal-20, color: ColorRGBA( 255, 255, 255 )})

请像jsfiddle一样使用它 - https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0006-pointClusters.html

Answer 1

LightningChart JS 中的 PointSeries 不支持为点添加边框。

要单独更改点的颜色，您需要使用 IndividualPointFill。创建新的 IndividualPointFill 时，需要指定备用颜色。当该点没有与其关联的其他颜色信息时使用此颜色。

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

const series = chart.addPointSeries()
    .setPointFillStyle(fillStyle)

// add a point using the fallback color
series.add({x: 0, y: 0})

// add a point and specify the color
series.add({x: 1, y: 0, color: ColorHSV(200)})

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    SolidFill,
    SolidLine,
    ColorPalettes,
    emptyFill,
    AxisTickStrategies,
    PointShape,
    IndividualPointFill,
    ColorHSV
} = lcjs

// ----- Cache used styles -----
const pointSize = 10
const palette = ColorPalettes.fullSpectrum(10)
const colors = [0, 6].map(palette)
const fillStyles = colors.map(color => new IndividualPointFill({ color }))
// Decide on an origin for DateTime axis.
const dateOrigin = new Date(2018, 8, 1)

// Create a XY Chart.
const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin),
})
    .setPadding({
        right: 50
    })

// Add a series for each cluster of points
const fstClusterSeries = chart.addPointSeries({ pointShape: PointShape.Circle })
    .setPointFillStyle(fillStyles[0])
    .setPointSize(pointSize)
const sndClusterSeries = chart.addPointSeries({ pointShape: PointShape.Triangle })
    .setPointFillStyle(fillStyles[1])
    .setPointSize(pointSize)

// The point supplied to series will have their X values multiplied by this value (for easier addition of DateTime-values).
const dataFrequency = 1000 * 60 * 60 * 24
const kuopioPoints = [
    { x: 12.152641878669275, y: 5335.336538461539 },
    { x: 11.62426614481409, y: 5259.615384615385 },
    { x: 10.919765166340508, y: 5082.932692307692 },
    { x: 10.156555772994128, y: 4923.076923076923 },
    { x: 9.334637964774949, y: 4796.875 },
    { x: 8.101761252446183, y: 4704.326923076923 },
    { x: 6.634050880626223, y: 4620.192307692308 },
    { x: 3.933463796477495, y: 4418.2692307692305 },
    { x: 3.111545988258317, y: 4342.548076923077 },
    { x: 2.8180039138943247, y: 4199.5192307692305 },
    { x: 2.8180039138943247, y: 4014.423076923077 },
    { x: 2.4657534246575334, y: 3930.2884615384614 },
    { x: 2.407045009784736, y: 3745.1923076923076 },
    { x: 2.935420743639921, y: 3408.653846153846 },
    { x: 3.6399217221135025, y: 3307.6923076923076 },
    { x: 5.107632093933463, y: 3181.4903846153848 },
    { x: 6.868884540117416, y: 3181.4903846153848 },
    { x: 7.749510763209393, y: 3198.3173076923076 },
    { x: 9.217221135029353, y: 3316.1057692307695 },
    { x: 10.215264187866929, y: 3475.9615384615386 },
    { x: 11.037181996086105, y: 3585.3365384615386 },
    { x: 12.035225048923678, y: 3719.951923076923 },
    { x: 12.798434442270057, y: 3778.846153846154 },
    { x: 16.027397260273972, y: 3820.9134615384614 },
    { x: 22.544031311154598, y: 3896.6346153846152 },
    { x: 24.187866927592953, y: 3963.9423076923076 }
]

const helsinkiPoints = [
    { x: 6.164383561643835, y: 2314.6634615384614 },
    { x: 6.516634050880624, y: 2351.2019230769233 },
    { x: 7.045009784735812, y: 2479.0865384615386 },
    { x: 7.279843444227005, y: 2543.028846153846 },
    { x: 7.514677103718199, y: 2638.9423076923076 },
    { x: 8.277886497064578, y: 2794.230769230769 },
    { x: 8.63013698630137, y: 2853.605769230769 },
    { x: 10.156555772994128, y: 2972.355769230769 },
    { x: 10.919765166340508, y: 3018.028846153846 },
    { x: 11.800391389432484, y: 3063.7019230769233 },
    { x: 12.798434442270057, y: 3109.375 },
    { x: 14.442270058708415, y: 3155.0480769230767 },
    { x: 16.320939334637963, y: 2538.4615384615386 },
    { x: 17.729941291585128, y: 2511.0576923076924 },
    { x: 14.442270058708415, y: 2465.3846153846152 },
    { x: 12.093933463796477, y: 2529.326923076923 },
    { x: 12.857142857142856, y: 2597.8365384615386 },
    { x: 12.563600782778865, y: 2419.7115384615386 },
    { x: 12.798434442270057, y: 2342.0673076923076 },
    { x: 13.79647749510763, y: 2296.394230769231 },
    { x: 13.033268101761252, y: 2282.6923076923076 },
]

// Setup view nicely.
chart.getDefaultAxisX()
    .setInterval(0 * dataFrequency, 30 * dataFrequency, true, true)

chart.getDefaultAxisY()
    .setInterval(1500, 6500, true, true)
/**
* Adds clusters of points to specified series and creates frames for them
* @param {PointSeries} series Series which should hold the cluster
* @return Function which receives a cluster of points
*/
const drawCluster = (series, points, colorOffset) => {
    // Add points to specified series
    series.add(points.map(point => ({
        x: point.x * dataFrequency,
        y: point.y,
        color: Math.random() > 0.5 ? ColorHSV(colorOffset + (50 * Math.random())) : undefined
    })))
}

drawCluster(fstClusterSeries, kuopioPoints, 100)
drawCluster(sndClusterSeries, helsinkiPoints, 0)

<script src="https://unpkg.com/@arction/lcjs@1.3.0/dist/lcjs.iife.js"></script>

为 Lightning 图表中的 PointSeries 添加边框并动态更改颜色

Add border and change color dynamically to PointSeries in Lightning chart

javascript

lightningchart