如何使用闪电图 js 创建分段彩色线？

问题描述

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

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

解决方法

自己找到了答案。

可以使用 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,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,endX: 100,endY: 60 },-1000,1000,5),new SolidLine({ fillStyle: new SolidFill({ color: ColorRGBA(0,220,0) }),thickness: 2 })
)