JavaScript图表库LightningChart JS交互示例：带有LegendBox的仪表板-控件新闻-慧都网

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

翻译|使用教程|编辑：吴园园|2020-03-17 09:36:22.833|阅读 250 次

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

相关链接：

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

点击下载LightningChart JS最新试用版

带有LegendBox的仪表板

此示例显示了一个简单的仪表板，其中包含多种图表类型和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
})

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

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

// 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应用于商业用途，欢迎。

关注下方的微信公众号，及时获取产品最新资讯▼▼▼

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