示例

立即下载LightningChart JS

让我们看一个非常基本的XY数据可视化用例，第一次接触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。

大多数常见的LightningChart JS配置都可以一个接一个流畅地调用，例如：

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

替代更传统的：

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

这两种方法都没有错，但是您会发现我们的示例广泛地使用了流利句法(第一个示例)。

系列概念

在LightningChart中有许多不同的系列类型，如LineSeries, PointSeries等。一般的想法是：序列是表示用户数据的东西，通常附加到一些轴上。

通过选择和组合不同的系列类型，用户可以产生各种不同的数据可视化，使用线序列生成折线图。选择一个点序列将产生一个散点图等等。

通过在一个图表中简单地组合几个系列，可以生成更复杂的数据可视化，例如在一个图表中添加2个LineSeries，或者用一个LineSeries和一个AreaSeries来可视化一个数据集。