悬停时在 X 轴上显示自定义刻度

Question

我正在使用以下代码添加自定义刻度和自定义标签

axisX3.addCustomTick()
    .setGridStrokeLength(0)
    .setTextFormatter(()=> ttstr[0]+":"+ttstr[1])
    .setValue(xVal);
atleast = 0;
    
spotseries3.setResultTableFormatter((builder, series, xValue, yValue) => {
    return builder
        .addRow('Straddle  - IV')
        .addRow(yValue.toFixed(2))
        .addRow(timdata[xValue.toFixed(0)])
})

请看上面的截图，我有几个问题：

你可以看到当我鼠标悬停时，它在 x 轴上显示 602。悬停时如何在 x 轴上显示自定义刻度？如何在悬停时隐藏 602？
悬停在红色线上时，如何完全禁用显示任何标签并在悬停时捕捉到蓝线而不是红线？
这个隔板怎么减薄？请看下面的截图。

Answer 1

1。你可以看到当我鼠标悬停时，它在 x 轴上显示 602，悬停时如何在 x 轴上显示自定义刻度，以及如何在悬停时隐藏 602。

您可以使用 cursor.disposeTickMarkerX() 删除自动光标刻度标记。这将使自动光标功能正常工作，但将从 X 轴上删除刻度标记。

chart.setAutoCursor(cursor => cursor
    .disposeTickMarkerX()
)

要在悬停系列时显示您自己的刻度，您可以向系列添加 hover 事件侦听器。在此侦听器中，您可以将自定义刻度移动到正确的位置。此侦听器的 point 参数将包含触发悬停事件的系列中的位置，或者如果系列不再悬停，则 point 将是未定义的。

lineSeries.onHover((series, point) => {
    if (point) {
        cTick.setValue(point.location.x)
    }
})

请参阅下面更完整的示例。

const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)
})

chart.setAutoCursor(cursor => cursor
    .disposeTickMarkerX()
)

const lineSeries = chart.addLineSeries({
    dataPattern: DataPatterns.horizontalProgressive
})
    .setStrokeStyle(s => s.setThickness(3))

const cTick = lineSeries.axisX.addCustomTick()
    .setMouseInteractions(false)
    .setValue(0)
    .setGridStrokeLength(0)
    .setTextFormatter(() => 'custom text')

lineSeries.onHover((series, point) => {
    if (point) {
        cTick.setValue(point.location.x)
    }
})

2。当悬停在红色线上时，如何完全禁用显示任何标签，以及在悬停时捕捉到蓝线而不是红线。

您可以使用 series.setCursorEnabled(false) 禁用红线的光标。这将从考虑显示自动光标的系列中删除。

在此图像中，黄线系列的光标已被禁用。因此，即使黄色系列更接近鼠标位置，也会显示红色系列光标。

3。如何减少这个分隔线的厚度，请看下面的截图

分隔线称为 splitter，您可以使用 dashboard.setSplitterStyle() 更改它的样式。

要减少它的厚度，你可以按照下面的代码。

const dashboard = lightningChart().Dashboard({
    numberOfRows: 2,
    numberOfColumns: 1
})

dashboard.setSplitterStyle(splitterStyle => splitterStyle.setThickness(3))

悬停时在 X 轴上显示自定义刻度

Show custom tick in X-axis on Hover

javascript

lightningchart

1。你可以看到当我鼠标悬停时，它在 x 轴上显示 602，悬停时如何在 x 轴上显示自定义刻度，以及如何在悬停时隐藏 602。

2。当悬停在红色线上时，如何完全禁用显示任何标签，以及在悬停时捕捉到蓝线而不是红线。

3。如何减少这个分隔线的厚度，请看下面的截图