如何在一个区域系列中用不同的颜色高亮显示高低值？

Question

在LightningchartJS中，我们可以在区域范围系列中用不同的颜色突出显示较低的范围和较高的范围。有没有可能在其他区域图中实现同样的效果？在当前的场景中，我有一个两极区域图，我想在其中标记高范围和低范围。我试过使用setHighStrokeStyle，但它似乎只适用于area range系列，我们是否也有类似的area系列？

我尝试了以下代码

const recordRangeStrokeFillStyleHigh = new SolidLine().setFillStyle(new SolidFill({ color: ColorRGBA(250, 91, 70) }))
const areaProfit = xyChart.addAreaSeries({ type: AreaSeriesTypes.Positive })
areaProfit.recordRange.setHighStrokeStyle(recordRangeStrokeFillStyleHigh)

Image of Area series without the highlight

Image with high and low ranges highlighted wit different colors

Answer 1

要设置双极区域系列中突出显示区域的填充样式，应使用set positive fill style highlight

.setPositiveFillStyleHighlight( new SolidFill( { color: ColorRGBA( 255, 255, 255 ) } ) )
.setNegativeFillStyleHighlight( new SolidFill( { color: ColorRGBA( 10, 10, 10 ) } ) )

Answer 2

在您的代码片段中，您使用的是Positive Area Series，这是一个单极区域。它不会绘制任何低于其基准值的内容。

Negative Area Series类似于正面积系列，它只绘制高于基准值的面积。

它们都可以通过使用areaSeries.setFillStyle或areaSeries.setStrokeStyle方法分别设置填充和边框的样式。

对于Bipolar AreaSeries，您可以使用

// Change fillStyle for positive area
areaSeries.setPositiveFillStyle( new SolidFill( { color: ColorRGBA( 255, 255, 255) } ) )
// Change strokeStyle for positive area
areaSeries.setPositiveStrokeStyle( new SolidLine( { fillStyle: new SolidFill( { color: ColorRGBA( 255, 255, 255) } ), thickness: 2 } ) ) 

更改正区域样式，或

// Change the fillStyle for negative area
areaSeries.setNegativeFillStyle( new SolidFill( { color: ColorRGBA( 255, 255, 255) } ) )
// Change strokeStyle for negative area
areaSeries.setNegativeStrokeStyle( new SolidLine( { fillStyle: new SolidFill( { color: ColorRGBA( 255, 255, 255) } ), thickness: 2 } ) ) 

若要更改负区域样式，请执行以下操作。