永利最大(官方)网站

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

点击下载LightningChart JS最新试用版

仪表板业务

 数据可视化工具广泛应用于所有行业领域。此示例显示了一个特定的业务案例，以可视化的方式将一个部门中虚构的公司整个年度的成本可视化为一个交互式仪表板。

仪表板布局

 仪表板网格由4行2列创建。本示例中的某些可视化组件通过在创建过程中显式提供行跨度和列跨度来填充多个单元格。

 1、左上角的单元格。该单元格包含一个图表，该图表显示使用通过SegmentSeries（不同于RectangleSeries）工具实现的条形图或柱形图显示的每个部门每年的成本。段系列提供了通过指定起点和终点来自由创建和放置线段的功能。

// Create XY chart and attach to the dashboard.
const barChart = dashboard.createChartXY({
    columnIndex: 2,
    rowIndex: 0,
    columnSpan: 2,
    rowSpan: 1
})

// Add segment series to series individual line segments.
// This series uses default axes.
const bars = barChart.addSegmentSeries()

// Add line segment.
const column = bars.add({
    startX: 10,
    startY: 10,
    endX: 20,
    endY: 20
})

// Configure the created bar column.
column
    .setStrokeStyle( style => ... )
    .onMouseEnter( () => pointerEnterHandler )
    .onTouchEvent( () => pointerEnterHandler )

// Create UI panel and attach to the dashboard.
const panel = dashboard.createUIPanel({
    columnIndex: 3,
    rowIndex: 1,
    columnSpan: 1,
    rowSpan: 1
})

// Add UI element specifying the builder.
// E.g. CheckBox, Button, Legend, etc.
panel.addUIElement(/* builder from the library */)

// Decide on an origin for DateTime axes.
const dateTimeTickStrategy = AxisTickStrategies.DateTime(new Date(2018, 0, 1))

// Create a chart for visualizing the costs of selected department.
// Specify DateTime format for x-axis labels.
const lineChart = dashboard.createChartXY({
    columnIndex: 2, 
    rowIndex: 1, 
    columnSpan: 1, 
    rowSpan:1, 
    chartXYOptions: { defaultAxisXTickStrategy: dateTimeTickStrategy }
})

// Create line series for elected department.
const lineSeries = lineChart.addLineSeries()

// Create a chart for visualizing the total costs of the company.
// Specify DateTime format for x-axis labels similarly as before.
const totalCostsChart = dashboard.createChartXY({
    columnIndex: 0, 
    rowIndex: 0, 
    columnSpan: 2, 
    rowSpan:2, 
    chartXYOptions: { defaultAxisXTickStrategy: dateTimeTickStrategy }
})

// Create line series for total costs of the company.
const lineSeries = lineChart.addSplineSeries()