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

點擊下載LightningChart JS最新試用版

散點圖

此示例顯示了一個簡單的散點圖，其中使用PointSeries繪制了點，用于數(shù)據(jù)點'標記'的可視化表示。點圖是在笛卡爾坐標系上繪制的一種圖表或數(shù)學圖，表示兩個變量之間的關系。

此類型的系列不包含用于連接數(shù)據(jù)點的線的可視化表示，而僅包含數(shù)據(jù)“標記”。

可以使用幾行簡單的代碼創(chuàng)建圖表：

// Add a scatter series with markers using default X and Y axes.const pointSeries = chart.addPointSeries()

PointSeries API允許配置數(shù)據(jù)標記的可視化表示。 

PointShape：枚舉

 必須在創(chuàng)建系列時指定PointShape！

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

PointSize：數(shù)字

pointSeries
    .setPointSize(5.0)

帶標記的FillStyle Scatter系列可以指定數(shù)據(jù)標記的填充樣式以及單個點填充樣式（進一步說明）

pointSeries
    .setPointFillStyle(fillStyleObject)

IndividualPointFill：FillStyle

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

{ 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 接受格式的點，以啟用單個點著色或其他填充樣式。一次調(diào)用可以添加任意數(shù)量的點，類似于帶有點標記的線序列。

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

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

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

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

// Dataset of Vec2Color data points with individual color.
pointSeries
    .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 ) },
    ])

教程持續(xù)更新中，感興趣的朋友記得關注后續(xù)教程哦~

推薦閱讀：

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

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

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

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