在悬停的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)])
})

https://codepen.io/typpo/pen/oNbwxvK

请参见上面的屏幕截图，我有几个问题：

1. 您可以看到当我将鼠标悬停在x轴上时显示602。悬停时如何在X轴上显示自定义刻度？如何在悬停时隐藏602？

2. 当鼠标悬停在红色线条上时，如何禁用显示所有标签并在鼠标悬停在蓝色线条而不是红色线条上的功能？

3. 如何减小分隔线的厚度？请参见下面的屏幕截图。

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))