「实战应用」如何用图表控件LightningChart创建JS堆叠条形图？

LightningChart JS是Web上性能特高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用从而实现高刷新率和流畅的动画常用于贸易工程航空航天医药和其他领域的应用。LightningChart JS提供了堆叠条形图用于轻松创建具有可定制功能的数据应用程序。JavaScript堆叠条形图当看到来自不同类别或彼此值的大量数据时堆叠条形图非常有用。我们可以看到一个类别是如何被分成几个部分的从最大到最小的部分相对于总量堆叠条形图有两种类型简单的堆叠条形图将每个值连续地放在一个段中条形图的总价值就是该段的总价值它是比较片段之间总数量的理想方法。100%堆叠条形图显示了每个细分市场中每个类别的总百分比并用每个值占该细分市场总数量的百分比表示这使得我们更容易看到各组数量的百分比差异。根据数据分析的目标我们可以根据可视化需求评估每个数据的有用性。在这种情况下JavaScript堆叠条形图对于任何类型的用户来说都很容易理解。JavaScript堆叠条形图的另一个特性是以多色条形显示数据其中每个条形代表一个主要类别每种颜色代表一个次要维度这使我们能够方便地查询每个段类别的次要维度及其关系之间的关系。项目概述在本文中我们将解释100%堆叠条形图并使用LightningChartJS和Node JS创建堆叠条形图。请记住您可以下载这个项目的模板并试用它直接戳这里模板设置1. 下载提供的模板来学习本教程。2. 下载模板后您会看到如下的文件树3. 打开一个新终端运行npm install命令。CHART.ts今天最新的版本是​​​​​​​LightningChartJS 5.1.0和XYData 1.4.0建议您查看最新版本就并进行更新因为一些LightningChart JS工具在以前的版本中不存在。在项目的package.json文件中你可以找到LightningChart JS依赖项dependencies: { arction/lcjs: ^5.1.0, arction/xydata: ^1.4.0, webgl-obj-loader: ^2.0.8, }1. 导入库我们将从导入创建图表所需的库开始。// Import LightningChartJS const lcjs require(arction/lcjs) const { lightningChart, BarChartSorting, LegendBoxBuilders, Themes } lcjs2. 添加许可密钥(免费)安装LightningChart JS库之后我们将把它们导入到chart.ts文件中注意您将需要试用许可证这是免费的。然后将其添加到一个变量中该变量将用于创建JavaScript堆叠条形图对象。let license undefined try { license xxxxxxxxxxxxx } catch (e) {}3. 属性LightningChartJS为您提供了完全自定义图表对象属性的可能性将使用以下属性来创建这个JavaScript堆叠条形图const barChart lightningChart({license: license}) .BarChart({ theme: Themes.cyberSpace, }) .setTitle(% of market share by mobile OS in 1999-2021) .setValueLabels(undefined) .setCursorResultTableFormatter((builder, category, value, bar) { builder.addRow(OS:, bar.subCategory).addRow(Share:, String(value), %) return builder })– Theme定义JavaScript堆叠条形图的外观和感觉注意您必须事先指定图表组件的颜色主题。–setCursorResultTableFormatter当光标指向本系列时配置光标悬停结果表的格式结果表将显示为一个带有数据值的弹出框。每一行被生成为一行(.addrow)我们可以用需要的文本对其进行格式化。子类别和值属性对应于分配给图表的数据。子类别包含图表的类别或分组的名称Value包含按类别堆叠的每个条的值。.setCursorResultTableFormatter((builder, category, value, bar) { builder.addRow(OS:, bar.subCategory).addRow(Share:, String(value), %)4. 类别和堆叠栏要将类别和堆叠条形图添加到JavaScript堆叠条形图中我们将使用setdatastack函数这个函数允许添加水平轴分组和属于每个分组的类别。值数组中的值将按照其连续顺序对应于分组例如值51将对应于组2004每个类别将堆叠在另一个类别之上但值将根据其位置和匹配组进行排序。barChart.setDataStacked( [1999, 2004, 2009, 2014, 2019, 2021], [ { subCategory: Symbian OS, values: [1, 51, 43, 0, 0, 0] }, { subCategory: Palm OS, values: [66, 18, 1, 0, 0, 0] }, { subCategory: BlackBerry OS, values: [1, 7, 20, 0.5, 0, 0] }, { subCategory: Windows Mobile, values: [20, 13, 7, 2, 0, 0] }, { subCategory: iOS, values: [0, 0, 15, 19, 14, 27] }, { subCategory: Android, values: [0, 0, 8, 77, 82, 72] }, { subCategory: Other, values: [12, 11, 6, 1.5, 4, 1] }, ], )5. LegendBox最后我们将添加图例框通过颜色指示类别并在单击它们时隐藏想要的类别。const legend barChart .addLegendBox(LegendBoxBuilders.VerticalLegendBox) .setAutoDispose({ type: max-width, maxWidth: 0.3, }) legend.add(barChart)图例框可以横向和纵向添加此图例框可以在满足条件时自动删除例如超过相对于图表大小的最大宽度当图表分辨率太小或当图表太大时释放内存时这很有用。6. 初始化图表最后在终端中运行npm start命令来可视化本地服务器上的JavaScript堆叠条形图。结论JavaScript堆叠条形图是一种帮助我们更有效地可视化数据的资源因为它能够轻松地表示复杂的数据集。即使这种类型的图表可能并不总是在所有仪表板报告中使用或看到它也是简化按组或类别显示大量数据的一个很好的资源。在这种情况下​​​​​​​LightningChart JS为我们提供了一个简单实用的图表组件JavaScript堆叠条形图同样我们不必过于担心用于开发图表应用程序的代码。只需向我们的对象提供一个数据数组就可以创建带有所有动画和可用控件的JavaScript堆叠条形图:barChart.setDataStacked( [1999, 2004, 2009, 2014, 2019, 2021], [ { subCategory: Symbian OS, values: [1, 51, 43, 0, 0, 0] }, { subCategory: Palm OS, values: [66, 18, 1, 0, 0, 0] }, { subCategory: BlackBerry OS, values: [1, 7, 20, 0.5, 0, 0] }, { subCategory: Windows Mobile, values: [20, 13, 7, 2, 0, 0] }, { subCategory: iOS, values: [0, 0, 15, 19, 14, 27] }, { subCategory: Android, values: [0, 0, 8, 77, 82, 72] }, { subCategory: Other, values: [12, 11, 6, 1.5, 4, 1] }, ], )