LightningChartJs - 为 x 轴添加折线图

Question

我想在折线图的 x 轴上显示断点并以固定宽度显示它们，如下图所示：

找到这篇描述功能的好文章：

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

如果我没理解错的话，SDK 中有可能用 scaleAreas 显示这些，或者用 ClipAreas 显示得更好。但是我在LightningChart JS框架中找不到这种可能性。

作为起点，我能够使用 NaN 值在数据中生成中断，并添加了一个文本框。

所以我的问题是：

1.如何添加中断并适合 xaxis

中的预定义宽度

2。如何将文本框旋转90度？

将不胜感激。

提前致谢。 :o)

// 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>

Answer 1

LightningChart JS 尚不支持刻度分隔符。它很可能会在某个时候开发，但还没有时间表。

UITextBox 还不能旋转文本框，它会在未来的版本中出现，但不是下一个版本。

LightningChartJs - 为 x 轴添加折线图

LightningChartJs - add breaks to line chart for x axis

javascript

charts

line-breaks

lightningchart