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)。これにより、自動カーソルを表示するための考慮からシリーズが削除されます。

シリーズの 1 つでカーソルが無効になっている 2 つのシリーズ。

この画像では、カーソルは黄色のライン シリーズで無効になっています。そのため、黄色のシリーズがマウスの位置に近い場合でも、赤いライン シリーズ カーソルが表示されます。

3. この仕切りの厚さを減らす方法については、以下のスクリーンショットを参照してください。

仕切りが呼び出されsplitter、 でスタイルを変更できますdashboard.setSplitterStyle()。

その厚さを減らすには、以下のコードに従うことができます。

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

dashboard.setSplitterStyle(splitterStyle => splitterStyle.setThickness(3))
于 2020-06-25T07:15:22.173 に答える