JavaScript图表库LightningChart JS交互示例：业务仪表板-控件新闻-慧都网

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

翻译|使用教程|编辑：吴园园|2020-01-09 16:30:37.917|阅读 689 次

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

相关链接：

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应用于商业用途，欢迎咨询慧都在线客服。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：LightningChart JS

上一篇：邮件组件集合MailBee Objects发送电子邮件教程（二）：电子邮件下一篇：质性数据分析软件NVivo教程：音频和视频转录本