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

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

0 голосов
/ 13 июля 2020

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

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

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

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

Пробовал 

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

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

1 Ответ

2 голосов
/ 14 июля 2020

Вы можете редактировать визуальный стиль созданного тика с помощью метода 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>
...