JavaScript图表库LightningChart JS交互示例：带有LegendBox的仪表板

此示例显示了一个简单的仪表板，其中包含多种图表类型和LegendBox面板。

LightningChart JS是Web上性能最高的图表库具有出色的执行性能 – 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用，从而实现高刷新率和流畅的动画。非常适合用于贸易，工程，航空航天，医药和其他领域的应用。

LightningChart JS最新试用版

带有LegendBox的仪表板

仪表板允许使用最少的内存资源高效地在单个视口中渲染多个场景。在创建仪表板实例的过程中，必须指定行和列的数量。此后无法更改。

// Create a dashboard with three rows and two columns.const dashboard = lightningChart().Dashboard({    numberOfRows: 3,    numberOfColumns: 2})

然后可以将图表和面板添加到仪表盘，如下所示：

// Create a ChartXY that occupies the top row of the dashboard.const chartXY = dashboard.createChartXY({    // Row index (starting from bottom).    columnIndex: 2,    // Column index (starting from left).    rowIndex: 0,    // Row span (height, basically).    columnSpan: 1,    // Column span (width, basically).    rowSpan: 2})

仪表板具有用于添加不同种类的图表或面板的单独方法。仪表板代表具有行和列的 格。在创建元素期间，应指定行和列索引以及水平和垂直跨度，以将其放置在正确的位置并填充所需数量的单元格。

// Create a spider chart and attach to dashboard.// Row 0, Column 0, Rows to fill 2, Columns to fill 1.const spiderChart = dashboard.createSpider( 0, 0, 2, 1 )// Create a Legend Box Panel and attach to dashboard.// Row 0, Column 1, Rows to fill 2, Columns to fill 1.const legendBox = dashboard.createLegendBoxPanel( {    columnIndex: 0,    rowIndex: 1,    columnSpan: 2,    rowSpan: 1})

仪表板的行和列可以分别具有不同的高度和宽度-您可以通过单击并拖动将列和行彼此分开的 格线或使用编程方式设置它们的方法来调整它们的大小：

// Set height of the first row of a dashboard.// By default each row and column has a size of 1.// The size is always relative to the combined size of each row / column.dashboard.setRowHeight( 0, 2 )// Set width of the first and the second column of a dashboard.// First column width will be 2/5 of the entire view's width.dashboard.setColumnWidth( 0, 2 )// Second column width will be 3/5 of the entire view's width.dashboard.setColumnWidth( 1, 3 )

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

如果你想LightningChart JS应用于商业用途，欢迎咨询在线客服。

标签：