Изменить цвет линии курсора - LightningChart - PullRequest
Новая
       6

Изменить цвет линии курсора - LightningChart

2 голосов
/ 17 июня 2020

Я создаю курсор, как показано ниже 

var purple =  new SolidFill({ color: ColorHEX('#ab00f5') }); 

// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
    .setPointMarker(UIBackgrounds.Circle)
    .addStyler(marker => marker
        .setPointMarker(point => point
            .setSize({ x: 4, y: 4 })
            .setFillStyle(purple)

        )

    )
chart[1].addChartMarkerXY(SeriesMarkerBuilder)
            .setPosition({ x: 400, y: 0 }) .setGridStrokeYVisibility(UIVisibilityModes.whenDragged);

Как мне изменить цвет и толщину этой белой вертикальной линии ... а также как скрыть метку и показать ее вверху?

enter image description here

1 Ответ

3 голосов
/ 18 июня 2020

Видимость метки

Вы можете управлять отображением меток с помощью ChartMarker.setTickMarkerXVisibility и ChartMarker.setTickMarkerYVisibility. UIVisibilityModes enum определяет возможные состояния видимости. Вы можете всегда скрывать метку с помощью UIVisibilityModes.never и показывать ее только при перетаскивании с помощью UIVisibilityModes.whenDragged, см. Документацию UIVIsibilityModes для всех возможных режимов видимости.

Метка вверху

Для перемещения метки вверх требуется наличие оси в верхней части диаграммы. 

const topAxis = chart.addAxisX(true)
const area = chart.addAreaSeries({type: AreaSeriesTypes.Positive, xAxis: topAxis})
const marker = chart.addChartMarkerXY(builder, topAxis)

Если вам не нужна ось x по умолчанию, вы можете удалить его с помощью chart.getDefaultAxisX().dispose(). Если ось по умолчанию удалена, а верхняя ось является единственной осью x, то параметр xAxis addChartMarkerXY можно опустить.

Стиль обводки сетки маркера

Стиль горизонтального маркера а вертикальные линии определяются либо добавлением стилизатора к построителю маркеров, либо изменением стиля после создания маркера.

Добавление стилизатора в построитель

Вы можете добавить стилизатор к MarkerBuilders.XY методом MarkerBuilders.XY.addStyler(). Стилер - это функция-мутатор, которая получает маркер в качестве первого параметра и ожидает, что от него будет возвращен новый маркер. (marker) => marker Вы можете стилизовать маркер с помощью методов интерфейса StaticCursorXY. Чтобы стилизовать вертикальную линию, вы должны задать стиль метода call StaticCursorXY.setGridStrokeXStyle() и определить новый стиль обводки. См. Фрагмент кода ниже для примера стиля. 

const SeriesMarkerBuilder = MarkerBuilders.XY
    .addStyler(marker => marker
        .setGridStrokeXStyle(line =>
            line.setFillStyle(f =>
                f.setColor(ColorHEX('#f00'))
            )
            .setThickness(10)
        )
    )

Стиль после создания

Если вы не хотите использовать конструктор для стилизации маркера диаграммы, вы можете использовать методы StaticCursorXY интерфейс напрямую. 

const marker = chart.addChartMarkerXY(MarkerBuilders.XY)
marker.setGridStrokeXStyle(line =>
    line.setFillStyle(f =>
            f.setColor(ColorHEX('#f00'))
        )
        .setThickness(1)
    )


// Extract required parts from LightningChartJS.
const {
    lightningChart,
    AreaSeriesTypes,
    ColorPalettes,
    SolidFill,
    UIOrigins,
    UIElementBuilders,
    LegendBoxBuilders,
    UIButtonPictures,
    ColorHEX,
    MarkerBuilders,
    UIBackgrounds,
    UIVisibilityModes
} = lcjs

// ----- Cache styles -----
const palette = ColorPalettes.fullSpectrum(10)
const solidFills = [3, 0].map(palette).map(color => new SolidFill({ color }))
const opaqueFills = solidFills.map(fill => fill.setA(150))

// Create a XY Chart.
const chart = lightningChart()
    .ChartXY()
    .setPadding({ right: 2 })

const xAxis = chart.addAxisX(true)
chart.getDefaultAxisX().dispose()

// ---- Add multiple Area series with different baselines and direction. ----
// Create semi-transparent red area to draw points above the baseline.
const areaProfit = chart.addAreaSeries({ type: AreaSeriesTypes.Positive, xAxis })
    .setFillStyle(opaqueFills[0])
    .setStrokeStyle(stroke => stroke.setFillStyle(solidFills[0]))

// Create semi-transparent orange area to draw points below the baseline.
const areaExpense = chart.addAreaSeries({ type: AreaSeriesTypes.Negative, xAxis })
    .setFillStyle(opaqueFills[1])
    .setStrokeStyle(stroke => stroke.setFillStyle(solidFills[1]))

const profitData = [
    { x: 0, y: 0 },
    { x: 10, y: 21 },
    { x: 20, y: 59 },
    { x: 30, y: 62 },
    { x: 40, y: 78 },
    { x: 50, y: 85 },
    { x: 60, y: 95 },
    { x: 70, y: 98 },
    { x: 80, y: 103 },
    { x: 90, y: 110 },
    { x: 100, y: 112 },
    { x: 110, y: 126 },
    { x: 120, y: 132 },
    { x: 130, y: 170 },
    { x: 140, y: 172 },
    { x: 150, y: 202 },
    { x: 160, y: 228 },
    { x: 170, y: 267 },
    { x: 180, y: 300 },
    { x: 190, y: 310 },
    { x: 200, y: 320 },
    { x: 210, y: 329 },
    { x: 220, y: 336 },
    { x: 230, y: 338 },
    { x: 240, y: 343 },
    { x: 250, y: 352 },
    { x: 260, y: 355 },
    { x: 270, y: 390 },
    { x: 280, y: 392 },
    { x: 290, y: 418 },
    { x: 300, y: 421 },
    { x: 310, y: 430 },
    { x: 320, y: 434 },
    { x: 330, y: 468 },
    { x: 340, y: 472 },
    { x: 350, y: 474 },
    { x: 360, y: 480 },
    { x: 370, y: 506 },
    { x: 380, y: 545 },
    { x: 390, y: 548 },
    { x: 400, y: 552 },
    { x: 410, y: 584 },
    { x: 420, y: 612 },
    { x: 430, y: 619 },
    { x: 440, y: 627 },
    { x: 450, y: 657 },
    { x: 460, y: 669 },
    { x: 470, y: 673 },
    { x: 480, y: 695 },
    { x: 490, y: 702 },
    { x: 500, y: 710 }
]
const expensesData = [
    { x: 0, y: 0 },
    { x: 10, y: -58 },
    { x: 20, y: -61 },
    { x: 30, y: -62 },
    { x: 40, y: -66 },
    { x: 50, y: -88 },
    { x: 60, y: -93 },
    { x: 70, y: -124 },
    { x: 80, y: -126 },
    { x: 90, y: -136 },
    { x: 100, y: -152 },
    { x: 110, y: -156 },
    { x: 120, y: -190 },
    { x: 130, y: -199 },
    { x: 140, y: -200 },
    { x: 150, y: -208 },
    { x: 160, y: -210 },
    { x: 170, y: -235 },
    { x: 180, y: -270 },
    { x: 190, y: -299 },
    { x: 200, y: -321 },
    { x: 210, y: -342 },
    { x: 220, y: -350 },
    { x: 230, y: -360 },
    { x: 240, y: -374 },
    { x: 250, y: -413 },
    { x: 260, y: -433 },
    { x: 270, y: -447 },
    { x: 280, y: -449 },
    { x: 290, y: -454 },
    { x: 300, y: -461 },
    { x: 310, y: -461 },
    { x: 320, y: -492 },
    { x: 330, y: -496 },
    { x: 340, y: -518 },
    { x: 350, y: -522 },
    { x: 360, y: -557 },
    { x: 370, y: -562 },
    { x: 380, y: -596 },
    { x: 390, y: -599 },
    { x: 400, y: -609 },
    { x: 410, y: -611 },
    { x: 420, y: -628 },
    { x: 430, y: -635 },
    { x: 440, y: -636 },
    { x: 450, y: -643 },
    { x: 460, y: -643 },
    { x: 470, y: -647 },
    { x: 480, y: -648 },
    { x: 490, y: -659 },
    { x: 500, y: -665 }
]

profitData.forEach((point) => { areaProfit.add(point) })
expensesData.forEach((point) => { areaExpense.add(point) })

var purple = new SolidFill({ color: ColorHEX('#ab00f5') });

// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
    .setPointMarker(UIBackgrounds.Circle)
    .addStyler(marker => marker
        .setPointMarker(point => point
            .setSize({ x: 4, y: 4 })
            .setFillStyle(purple)
        )
        .setGridStrokeXStyle(line =>
            line.setFillStyle(f =>
                f.setColor(ColorHEX('#f00'))
            )
            .setThickness(10)
        )
    )
const marker = chart.addChartMarkerXY(SeriesMarkerBuilder)
    .setPosition({ x: 400, y: 0 })
    .setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
    .setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>
...