LightningChart JS是Web上性能最高的圖表庫具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫。非常適合用于貿易，工程，航空航天，醫藥和其他領域的應用。

點擊下載LightningChart JS最新版

點線系列

也稱為線系列，折線圖，折線圖和帶標記的線。

此示例顯示了具有“標記”的線系列的基本用法，用于數據點的可視化表示。與線系列類似，它在笛卡爾坐標系上繪制，表示兩個變量之間的關系。線系列將信息顯示為由任意方向上的直線段連接的一系列數據點。此類系列還在數據集中指定的位置的行頂部繪制數據標記。

可以使用幾行簡單的代碼創建圖表：

// Add a line series with markers using default X and Y axes.const lineSeries = chart.addPointLineSeries()

帶有標記的線系列可以單獨指定標記和線條的樣式。

lineSeries
    .setStrokeStyle(lineStyleObject)
    .setPointFillStyle(fillStyleObject)

它與PointSeries共享相同的API，允許配置數據標記的可視化表示。

PointShape：枚舉

必須在創建系列時指定PointShape！

// Add a line series with markers using default X and Y axes. Select Circle PointShape.const lineSeries = chart.addPointLineSeries( { pointShape: PointShape.Circle } )

PointSize：數字

lineSeries.setPointSize(5.0)
IndividualPointFill：FillStyle

樣式表示每個點著色的個體。該樣式允許使用從輸入中獲取的單個填充。
該系列可以接受格式的點 如果在輸入數據點期間沒有提供顏色（例如格式），則使用可配置的后備顏色。

{ x: number, y: number, color: Color }{ x: number, y: number } 
// Create the instance of IndividualPointFill fill style.const individualStyle = new IndividualPointFill()// Set red color as a fallback color
individualStyle.setFallbackColor( ColorRGBA( 255, 0, 0 ) )

如前所述，該系列使用指定的IndividualPointFill 接受格式的點，以啟用單個點著色或其他填充樣式。一次調用可以添加任意數量的點，類似于帶有點標記的線序列。

{ x: number, y: number: color: Color }{ x: number, y: number }

沒有顏色的數據集。如果指定了IndividualPointFill，則使用后備顏色。否則，使用指定的填充樣式。

// Dataset of Vec2 data points without color.
lineSeries
    .add([
        { x: 5, y: 10 },
        { x: 7.5, y: 20 },
        { x: 10, y: 30 }
    ])

具有單獨顏色的數據集。如果指定了IndividualPointFill，則使用數據點或后備顏色的顏色。否則，使用指定的填充樣式。

// Dataset of Vec2Color data points with individual color.
lineSeries
    .add([
        // use red color if IndividualPointFill is specified
        { x: 2.5, y: 0, color: ColorRGBA( 255, 0, 0 ) },
        // use fallback color if IndividualPointFill is specified
        { x: 5, y: 10 },
        // use green color if IndividualPointFill is specified
        { x: 7.5, y: 20, color: ColorRGBA( 0, 255, 0 ) },
        // use blue color if IndividualPointFill is specified
        { x: 10, y: 30, color: ColorRGBA( 0, 0, 255 ) },
    ])

 推薦閱讀：

JavaScript圖表庫LightningChart JS最新版本v1.0.0發布|附下載

=====================================================

如果你想LightningChart JS應用于商業用途，歡迎。

關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼