减小自定义刻度字体大小并更改颜色

Question

我正在添加如下自定义标记

 axisX3.addCustomTick()
    .setGridStrokeLength(0)
    .setTextFormatter(()=> ttstr[0]+":"+ttstr[1])
    .setValue(xVal);

如何更改字体大小/颜色
更改边框颜色/样式
删除刻度周围的矩形，只在顶部显示指针。

我试过了

 .setTitleFont(f => f
        .setSize(24)
    )

但不工作

Answer 1

您可以使用 customTick.setMarker() 方法编辑创建的刻度的视觉样式。此方法将增变函数作为第一个也是唯一的参数。

要更改字体大小：

const tick = axisX.addCustomTick()
    .setMarker(marker => marker
        .setFont(font => font
            .setSize(40)
        )
    )

设置边框样式：

const tick = axisX.addCustomTick()
    .setMarker(marker => marker
        .setBackground(background => background
            .setStrokeStyle((line) => line
                .setFillStyle(style => style
                    .setColor(ColorHEX('#f00'))
                )
            )
        )
    )

只显示指针是不可能的。

请参阅下面的滴答样式片段。

const {
    lightningChart,
    emptyLine,
    ColorHEX,
} = lcjs

const chart = lightningChart().ChartXY()

const axisX = chart.getDefaultAxisX()

const tick = axisX.addCustomTick()
    .setMarker(marker => marker
        .setFont(font => font
            .setSize(40)
        )
        .setBackground(background => background
            .setStrokeStyle((line) => line
                .setFillStyle(style => style
                    .setColor(ColorHEX('#f00'))
                )
            )
        )
    )
    .setValue(4)

<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

减小自定义刻度字体大小并更改颜色

Reduce custom tick font size and change color

lightningchart