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()