1

我想在折线图的 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>

4

1 回答 1

0

LightningChart JS 尚不支持刻度中断。这很可能会在某个时候开发，但还没有时间表。

UITextBox 尚无法进行 TextBox 旋转，它将在未来版本中推出，但不会在下一个版本中推出。

于 2020-07-15T12:31:52.300 回答