示例

立即下載LightningChart JS

讓我們看一個(gè)非常基本的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);

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

大多數(shù)常見的LightningChart JS配置都可以一個(gè)接一個(gè)流暢地調(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);

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

系列概念

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

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

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