JavaScript图表库LightningChart JS交互示例：业务仪表板

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

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

LightningChart JS最新试用版

仪表板业务

仪表板 xy 栏 列 ui 行 日期时间

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

仪表板布局

仪表板 格由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()

段系列接受以下格式的输入：{startX：number，startY：number，endX：number，endY：number}。该系列返回创建的线段，以提供进一步修改的能力。图表填充2行和1列。

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

关于定制，可以将每列配置为具有单独的样式以及鼠标和触摸事件。每个图表和系列都有鼠标/触摸事件。通过开始键入“ onMouse”来搜索我们的API文档。

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

2、右上方的单元格，上部。该单元格包含一个UI面板，该面板显示了全年的公司总成本。UI面板只能显示UI组件。图表填充1行和1列。

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

3、右上方的单元格，下部。该单元格包含一个图表，该图表显示了一年中每一天单个部门的唯一成本。该图表将线形图与通过将鼠标移至条形图中的列上方而收集的数据一起呈现。图表填充1行和1列。

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

3、底部单元格。该单元格包含一个图表，该图表显示了全年所有公寓的总费用的平滑线（使用SplineSeries）。图表填充2行2列。

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

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