在悬停的X轴上显示自定义刻度 [英] Show custom tick in X-axis on Hover

问题描述

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

I am adding custom ticks and custom labels using below code

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

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

Please see above screenshot, I have few questions:

1. 当我将鼠标悬停在x轴上时，您会看到它显示602.悬停时如何在X轴上显示自定义刻度?如何在悬停时隐藏602?

1. You can see when I mouse hover, its showing 602 in x-axis. How to show custom tick in x-axis while hovering? How to hide 602 on hover?

当鼠标悬停在红色线条上时，如何完全禁用显示任何标签并悬停在鼠标悬停在蓝色线条而不是红色线条上?

When hovering on red color line, how to disable showing any label at all and snap to blue line on hover instead of red line?

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

How to reduce thickness of this divider? Please see below screenshot.

推荐答案

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

您可以使用 cursor.disposeTickMarkerX() .这将使自动光标功能保持工作状态，但会从X轴上删除刻度线标记.

1. You can see when I mouse hover , its showing 602 in x-axis ,how to show custom tick in x-axis while hovering , also how to hide 602 on hover.

You can remove the auto cursor tick marker with cursor.disposeTickMarkerX(). This will leave the auto cursor functionality working but will remove the tick marker from X axis.

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

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

To show your own tick when hovering the series you can add hover event listener to the series. In this listener you can move your custom tick to the correct location. The point parameter of this listener will contain the location on the series where the hover event was fired or the point will be undefined if the series is no longer hovered.

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

请参阅下面的一些更完整的示例.

See below a bit more complete example.

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) .这将从显示自动光标的考虑中删除该系列.

2. When hovering on red color line , how to disable showing any label at all ,, and snap to blue line on hover instead of red line.

You can disable the cursor for the red line with series.setCursorEnabled(false). This will remove the series from consideration for showing the auto cursor.

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

In this image the cursor has been disabled for the yellow line series. So even though the yellow series is closer to the mouse location, the red line series cursor is shown.

分隔线称为splitter，您可以使用

The divider is called splitter and you can change the styling of it with dashboard.setSplitterStyle().

要减小其厚度，您可以按照以下代码进行操作.

To reduce the thickness of it you can follow the code below.

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

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

这篇关于在悬停的X轴上显示自定义刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！