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

點(diǎn)擊下載LightningChart JS最新試用版

散點(diǎn)圖

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

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

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

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

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

PointShape：枚舉

 必須在創(chuàng)建系列時(shí)指定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)

帶標(biāo)記的FillStyle Scatter系列可以指定數(shù)據(jù)標(biāo)記的填充樣式以及單個(gè)點(diǎn)填充樣式（進(jìn)一步說(shuō)明）

pointSeries
    .setPointFillStyle(fillStyleObject)

IndividualPointFill：FillStyle

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

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

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

沒(méi)有顏色的數(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 }
    ])

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

// 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ù)更新中，感興趣的朋友記得關(guān)注后續(xù)教程哦~

推薦閱讀：

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

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

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

關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼