Уменьшите размер пользовательского шрифта галочки и измените цвет

Я добавляю пользовательскую галочку, как показано ниже

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

введите здесь описание изображения

  1. Как изменить размер/цвет шрифта
  2. изменить цвет/стиль границы
  3. уберите прямоугольник вокруг галочек и просто покажите указатель вверху.

Я старался

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

Но не работает


lightningchart
person Gracie williams    schedule 13.07.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете изменить визуальный стиль созданного тика с помощью 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/[email protected]/dist/lcjs.iife.js"></script>

person Snekw    schedule 14.07.2020