1

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

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

在此处输入图像描述

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

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

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

  3. 如何减少此分隔器的厚度？请看下面的截图。

在此处输入图像描述

4

1 回答 1

2

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))
于 2020-06-25T07:15:22.173 回答