示例

立即下載LightningChart JS

讓我們看一個非常基本的XY數(shù)據(jù)可視化用例，第一次接觸LightningChart JS概念。

import { lightningChart } from "@arction/lcjs"; 

const chart = lightningChart().ChartXY().setTitle("My Chart"); 

const axisX = chart.getDefaultAxisX().setTitle("X Axis"); 

const axisY = chart.getDefaultAxisY().setTitle("Y Axis"); 

const lineSeries = chart
.addLineSeries({ 
// Optimize line series for progressively increasing X coordinates. 
dataPattern: { pattern: 'ProgressiveX' } 
}) 
.setName("My Line Series") 
.add([ 
{ x: 0, y: 10 }, 
{ x: 1, y: 15 }, 
{ x: 2, y: 12 }, 
{ x: 3, y: 7 }, 
{ x: 4, y: 8 }, 
]); 

const legend = chart.addLegendBox().add(chart);

上面的代碼應該是相對明了的，你可以看到非常常見的類，如Chart(在本例中為ChartXY)、Axis、LineSeries和LegendBox。

大多數(shù)常見的LightningChart JS配置都可以一個接一個流暢地調(diào)用，例如：

const lineSeries = chart
.addLineSeries() 
.setName("My Line Series") 
.setCursorEnabled(true) 
.setVisible(true);

替代更傳統(tǒng)的：

const lineSeries = chart.addLineSeries(); 
lineSeries.setName("My Line Series"); 
lineSeries.setCursorEnabled(true); 
lineSeries.setVisible(true);

這兩種方法都沒有錯，但是您會發(fā)現(xiàn)我們的示例廣泛地使用了流利句法(第一個示例)。

系列概念

在LightningChart中有許多不同的系列類型，如LineSeries, PointSeries等。一般的想法是：序列是表示用戶數(shù)據(jù)的東西，通常附加到一些軸上。

通過選擇和組合不同的系列類型，用戶可以產(chǎn)生各種不同的數(shù)據(jù)可視化，使用線序列生成折線圖。選擇一個點序列將產(chǎn)生一個散點圖等等。

通過在一個圖表中簡單地組合幾個系列，可以生成更復雜的數(shù)據(jù)可視化，例如在一個圖表中添加2個LineSeries，或者用一個LineSeries和一個AreaSeries來可視化一個數(shù)據(jù)集。