LightningChart JS是Web上性能最高的圖表庫(kù)具有出色的執(zhí)行性能 - 使用高數(shù)據(jù)速率同時(shí)監(jiān)控?cái)?shù)十個(gè)數(shù)據(jù)源。 GPU加速和WebGL渲染確保您的設(shè)備的圖形處理器得到有效利用，從而實(shí)現(xiàn)高刷新率和流暢的動(dòng)畫(huà)。非常適合用于貿(mào)易，工程，航空航天，醫(yī)藥和其他領(lǐng)域的應(yīng)用。

點(diǎn)擊下載LightningChart JS最新試用版

儀表板業(yè)務(wù)

數(shù)據(jù)可視化工具廣泛應(yīng)用于所有行業(yè)領(lǐng)域。此示例顯示了一個(gè)特定的業(yè)務(wù)案例，以可視化的方式將一個(gè)部門(mén)中虛構(gòu)的公司整個(gè)年度的成本可視化為一個(gè)交互式儀表板。

儀表板布局

儀表板網(wǎng)格由4行2列創(chuàng)建。本示例中的某些可視化組件通過(guò)在創(chuàng)建過(guò)程中顯式提供行跨度和列跨度來(lái)填充多個(gè)單元格。

1、左上角的單元格。該單元格包含一個(gè)圖表，該圖表顯示使用通過(guò)SegmentSeries（不同于RectangleSeries）工具實(shí)現(xiàn)的條形圖或柱形圖顯示的每個(gè)部門(mén)每年的成本。段系列提供了通過(guò)指定起點(diǎn)和終點(diǎn)來(lái)自由創(chuàng)建和放置線段的功能。

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