LightningChart Js - добавить разрывы к линейному графику по оси x - PullRequest
Новая
       135

LightningChart Js - добавить разрывы к линейному графику по оси x

1 голос
/ 14 июля 2020

Я хотел бы отображать разрывы на оси x линейной диаграммы и отображать их с фиксированной шириной, как на изображении ниже:

chart break

Found this nice article that describes the functionality:

https://www.arction.com/news/using-scale-breaks-data-visualization/

Если я правильно понимаю, в SDK есть возможность отображать их с помощью scaleAreas или даже лучше с помощью ClipAreas. Но я не смог найти эту возможность в структуре LightningChart JS.

В качестве отправной точки я смог сгенерировать разрывы данных со значением NaN и добавил текстовое поле.

Итак мои вопросы:

1. Как добавить разрывы и подогнать под заданную ширину по оси x

2. Как повернуть текстовое поле на 90 градусов?

Помощь будет принята с благодарностью.

Заранее спасибо. : о) 

// Extract required parts from LightningChartJS.
    const {
        lightningChart,
        AxisTickStrategies,
        DataPatterns,
        emptyFill,
        ColorHEX,
        emptyLine,
        UIElementBuilders,
        UIBackgrounds,
        UIOrigins,
        UIDraggingModes,
        SolidLine,
        SolidFill
    } = lcjs
    
    // Create a XY Chart.
    const dateOrigin = new Date(2020, 0, 1)
    const chart = lightningChart().ChartXY({
        defaultAxisXTickStrategy: AxisTickStrategies.DateTime(
            dateOrigin
        )
    })
        .setTitle('Demo')
    
    chart.setPadding({ right: '1' })
    
    // Add a progressive line series.
    // Using the DataPatterns object to select the horizontalProgressive pattern for the line series.
    const lineSeries = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })
        .setName('Demo')
    
    // Generate some points using for each month
    const dataFrequency = 10;
    
    // Setup view nicely.
    chart.getDefaultAxisY()
        .setScrollStrategy(undefined)
        .setInterval(-20, 120)
        .setTitle('Demo y')
    
    // Data for the plotting
    
    const data = [];
    
    for (let i = 0; i < 1500; i++) {
    
      let index = i;
    
        if (i === 500) {
            index = NaN;
        }
        
        if (i > 500) {
            index = i + 1000;
        }
    
    
        data.push({
            x: index,
            y: Math.floor(Math.random() * 100)
        });
    }
    
    chart.addUIElement(
    UIElementBuilders.TextBox
        .setBackground(UIBackgrounds.Rectangle),
    chart.uiScale
)
    .setText('Break')
    .setPosition({ x: 45, y: 50 })
    .setOrigin(UIOrigins.Center)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setFont((font) => font
        .setSize(40)
    )
    .setBackground(style => style
        .setFillStyle(new SolidFill({ color: ColorHEX('#f00') }))
    )
    .setTextFillStyle((style) => style
        .setColor(ColorHEX('#0f0'))
    )
    
    
    // Adding points to the series
    lineSeries.add(data.map((point) => ({ x: point.x * dataFrequency, y: point.y })))
<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

1 Ответ

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

LightningChart JS пока не поддерживает разрыв шкалы. Это то, что, скорее всего, будет разработано в какой-то момент, но для этого еще нет графика.

Вращение TextBox пока невозможно для UITextBox, оно появится в следующем выпуске, но не в следующем выпуске.

...