我如何使用 lightning chart js 创建分段的彩色线条？

Question

任何人都可以使用这个库绘制线段吗？

我尝试使用 addsegmentseries 方法，但没有用。

Answer 1

自己找到了答案。

可以使用 addSegmentSeries() 方法创建段。可以使用 add() 方法传递线段坐标。

/**Segment coordinates */
const config = {
    startX: 0,
    startY: 60,
    endX: 20,
    endY: 60
};

/**Line style */
const style = new SolidLine(
      { thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(0, 125, 0) }) })

let series = chart
    .addSegmentSeries()
    .add(config)
    .setStrokeStyle(style) 
enter code here

绘制分段线的一种方法是将单个子线段组合在一起。

这是一个示例代码：

/**Segment division in many sub segments
 * @param segment to split. E.C: { startX: 0, startY: 60, endX: 20, endY: 60 }
 * @param min minimal value to use for segmented line begin
 * @param max maximum value to use for segmented line ending
 * @param offsetPx sub segments lenght */
function getSubSegments(segment, min, max, offsetPx) {
    const range = segment != null ? segment.endX - segment.startX : -1;
    if (range === -1) { return; }
    const dividedSegments = [];
    min = min <= segment.startX ? min : segment.startX - 1000;
    max = max >= segment.endX ? max : segment.endX + 1000;
    let offset = min + offsetPx;
    while (offset <= max) {
        dividedSegments.push({
            startX: dividedSegments.length > 0 ? dividedSegments[dividedSegments.length - 1].endX : min,
            startY: segment.startY,
            endX: offset,
            endY: segment.endY
        });
        offset += offsetPx;
    }
    return dividedSegments;
}

/**Function to draw segments on chart
 * @param chart which will draw segments
 * @param subSegments to draw on chart
 * @param customStrokeStyle to apply to the line
 */
function drawSegmentedLine(chart, subSegments, customStrokeStyle) {
    const lineSeriesObjs = [];
    let index = -1;
    let series = null;
    for (let i = 0; i < subSegments.length - 1; i++) {
        index = i;
        if (i % 2 === 0) {
            let series = chart
                .addSegmentSeries()
                .add(subSegments[i])
                .setStrokeStyle(customStrokeStyle)
        }
    }
}

drawSegmentedLine(
    chart,
    getSubSegments({ startX: 0, startY: 60, endX: 100, endY: 60 }, -1000, 1000, 5),
    new SolidLine({ fillStyle: new SolidFill({ color: ColorRGBA(0, 220, 0) }), thickness: 2 })
)

我如何使用 lightning chart js 创建分段的彩色线条？

how can i create a segmented colored line using lightning chart js?

javascript

charts

line

segment

lightningchart