LightningChart JS是一款高性能的JavaScript圖標庫，專注于實時數據可視化，以“快如閃電”享譽全球，是Microsoft Visual Studio數據展示速度最快的2D和3D圖表制圖組件，可實時呈現超過10億數據點的海量數據。

LightningChart .JS | 下載試用

本文將帶來如何使用 LightningChart 創建 JavaScript 散點圖，主要從2個方面講解，一是LightningChart JS XY 圖表的功能應用，二是講解如何使用 LightningChart JS 創建嵌入式散點圖并向其添加自定義交互功能。

• 創建 XY 圖表。
• 創建點系列。
• 使用包含 100 個項目的隨機生成的數據集填充該系列。

const chart = lightningChart().ChartXY()
const pointSeries = chart.addPointSeries()
pointSeries.add(new Array(100).fill(0).map(() => ({
x: Math.random(),
y: Math.random()
})))

將自定義屬性附加到數據點

在為 Lightning Chart JS 提供數據時，我們采用了 JavaScript 對象的格式，它允許任意數量的鍵：值組合。在前面的代碼片段中，我們看到了創建具有 X 和 Y 屬性的 JavaScript 對象：

const point = { x: 0, y: 0 } 

添加自定義數據點屬性就像人們猜測的那樣簡單：在 x 和 y 之后添加它們：

const point = { x: 0, y: 0, custom: 'abcdefg' }  

然后可以將這些自定義屬性與數據游標、從鼠標位置求解數據點等一起使用。在本示例中，我們將它們與 UI 文本元素一起使用。

此代碼添加一個標簽，將其放置在數據點旁邊，并將其設置為顯示數據“自定義”屬性中的文本。

const label = chart.addUIElement(
   UIElementBuilders.TextBox,
   { x: xAxis, y: yAxis }
)
label
   .setPosition(point)
   .setMargin({ bottom: 10 })
   .setText(point.custom) 

我們還可以在這里做一個小標識，這對我們以后的工作會有很大幫助。讓我們為數據點添加另一個自定義屬性--UI文本元素。

point.label = label 

當用戶將鼠標移動到數據點時，顏色標簽將變為白色

chart.onSeriesBackgroundMouseMove((_, event) => {
   const nearestDataPoint = pointSeries.solveNearestFromScreen(chart.engine.clientLocation2Engine(event.clientX, event.clientY))
   if (nearestDataPoint) {
      label.setFillStyle(new SolidFill({ color: ColorRGBA(255, 255, 255) }))
   }
}) 

這是嵌入圖表的最終結果。單擊嵌入式圖表右上角的圖標，可以在 GitHub 中找到完整的源代碼。

歡迎加入LightningChart技術交流群，獲取最新產品咨詢：740060302

想了解Lightning Charts JS 購買/授權/試用下載，歡迎咨詢。