如何修改 LightningChart JS 点线系列以实现上述功能？

Question

我想用一个简单的点线系列创建一个 XY 图表。为此，我开始试用 Arction 的 LightningChart JS 软件。在创建具有默认属性的点线系列后，我想回答的几个问题是：

如何隐藏沿光标线的任一轴上显示的信息框？我们不需要它们，因为我们可以在光标框上看到 x y 信息。
如何改变光标框内容的颜色？
如何更改光标框内容的标题？

Answer 1

您可以通过为自动光标设置刻度标记来隐藏轴上的框。这可以通过图表的自动光标来完成，如下所示：

// Modify the Chart's AutoCursor
chart.setAutoCursor( cursor => cursor
    // Dispose of the information box over the X and Y Axis respectively
    .disposeTickMarkerX()
    .disposeTickMarkerY()
)

您可以通过修改图表的自动光标来更改光标框中内容的样式：

// Modify the Chart's AutoCursor
chart.setAutoCursor( cursor => cursor
    // Modify the ResultTable (i.e. cursor box)
    .setResultTable( rt => rt
        // Style the text inside the box
        .setTextFillStyle( fillStyle => fillStyle.setColor(ColorHEX('#996699') )
)

// Alternatively you can have the text inside the cursor box change color
// automatically depending on the hovered Series:

chart.setAutoCursor(cursor => cursor
    // Color the cursor box's text automatically based on hovered Series style.
    .setResultTableAutoTextStyle(true)
)

光标框默认使用悬停系列的名称作为标题。您可以通过修改系列的结果表格式化程序来更改此设置：

// Modify the ResultTable Formatter for a Series.
lineSeries.setResultTableFormatter( ( builder, _, xValue, yValue ) => {
    return builder
        .addRow( 'Custom Title' )
        // Adding an empty string between the String and the xValue will align the
        // text nicely inside the box.
        .addRow( 'X Value:', '', xValue.toString() )
        // Alternatively, undefined can be used to align the text in the same manner
        // as with empty string.
        .addRow( 'Y Value:', undefined, yValue.toString() )
} )

如何修改 LightningChart JS 点线系列以实现上述功能？

How do i modify LightningChart JS point line series to achieve mentioned functionalities?

javascript

charts

point

lineseries

lightningchart