如何使用 NodeJS、TypeScript 和 LightningChart JS 开发条形图竞赛应用程序？

此外，对于此图表，我们将使用从 COVID 跟踪器 API 获取的数据。

https://coronavirus-tracker-api.herokuapp.com/confirmed

这些数据是真实的，因此如果您需要处理 COVID-19 信息，此图表将对您有用。在本练习中，我们将使用来自冠状病毒追踪器 API 和本地 JSON 文件的数据。

下载项目以跟随教程

项目概况

为了跟踪全球的病毒病例数并确保人们的安全，许多组织开发了自定义图表来可视化他们的数据。

这是我们开发的示例，一个赛车条形图。这种类型的图表显示了一段时间内的病例数，因为图表中国家/地区的位置根据病例数而变化。这样就可以很容易地从登记案件的数量方面了解这些国家的发展情况。

配置模板

1. 在 Visual Studio Code 中打开后，您将看到如下所示的文件树：


如您所见，我们只有一个 JSON 数据文件和 COVIDCHART 打字稿文件。

2. 请打开一个新终端。
3. 像往常一样在 Node JS 项目中，我们必须运行 NPM 安装命令。

JSON文件

1. 在我们的covid.json文件中，我们将看到以下结构：
   

• 成员：将在我们的打字稿代码中用于获取成员的根节点。
• 国家：在此文件中选择的所有国家的名称值。
• 历史记录： covid 病例的日期和数值（按天）。

如果您想向此文件添加更多数据，可以从此处获取数据：
https://coronavirus-tracker-api.herokuapp.com/confirmed

COVIDCHART.ts

在这个文件中，我们将拥有创建图表、配置动画和格式化数据所需的所有逻辑。

1. 导入 JSON 数据文件。
2. 声明将引用我们的@arction/lcjs 库的常量 lcjs。
3. 从 lcjs 中提取所需的类。

4. 现在我们将声明以下常量：


这些值将影响我们图表的行为，因此现在声明它们并将它们用作全局值，对于我们图表中的任何更新都会更容易。

• rectThickness：这将影响我们图表中所有条形的粗细。值越高，条越细，反之亦然（值可以是浮动的）。
• rectGap：会影响标签的位置和每个条的数字。
• 持续时间：这将是我们所有柱的加速时间。如果您指定一个次要值，条形图将更快地加载这些值。

之后，我们可以通过简单地使用纬度/经度坐标作为 XY 轴值来可视化世界上的任何位置！

• Ls.ChartXY：我们指定要创建一个 XY 图表类型。
• setTitle：将在图表顶部显示为标题的文本。该值是一个字符串类型，因此您可以动态构造一个字符串值。
• setAutoCursorMode：通过从AutoCursorModes中选择预设选项来设置图表 AutoCursor 行为。

  阅读更多：

  https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setautocursormode

• setPadding：所有边都有像素边距的数字，或者每边都有单独像素填充的数据结构。任何一方都可以省略，只有传递的值会被覆盖。

  阅读更多：

  https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setPadding

• setMouseInteractions：此布尔值将启用图表构建中可以支持的所有鼠标交互。

  阅读更多： https ://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setmouseinteractions

• getDefaultAxisY/AxisX：获取对 ChartXY 的默认 Y 轴的引用。这将始终返回对最接近图表的 Y 轴的引用（从底部开始）。[getDefaultAxisX]下面的所有方法都只会影响 X 轴。（如果您需要参考 Y 轴[getDefaultAxisY]，则使用相同的逻辑）。

  阅读更多：

  https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setmouseinteractions

• setTickStrategy： TickStrategy定义了 Axis刻度的定位和格式化逻辑以及创建的刻度的样式。

  阅读更多：

  https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/axis.html#settickstrategy

• setAnimationScroll：指定要使用的缩放动画。

  阅读更多：

  https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/axis.html#setanimationscroll

• createTickLabel：在这个函数中，我们将声明所有柱的标签属性：

• addCountryHandler：该函数返回具有维度、数据（条目）和标签属性的单个条形图。


每个国家都有不同风格的矩形系列：



将 TextBox 元素添加到栏：



设置标签标题和位置：



设置 Y 轴的间隔：



增加 Y 变量的值：



返回图：


• addCountries：该函数将作为循环工作，为每个柱执行[addCountryHandler]函数。

• sortCountries：该函数将按日期对所有数据进行排序。
  在“data”参数中，我们将在“members”元素中包含所有值。“ raceDay”参数将作为我们图表开始的初始值。“raceDay”将使用变量“initDay”（15）中的值。结果将在“countryList”对象中返回。

• startRace：这个函数将协调我们之前声明的所有函数。该函数将为“startRaceHandler”函数执行。

• startRaceHandler：这里我们会将 JSON 数据发送到 [startRace] 函数。我们将开始发出 HTTP 请求（获取），以获取 LightningChart 提供的 COVID 数据。该数据由 CORONAVIRUS Tracker API 获取。
  结果将被发送到[startRace]函数。如果请求失败，则将 JSON 文件作为数据源。


在[startRace]内部，我们将使用函数[mergeData]。有些国家是按地区划分的，需要合并。 这更适用于实时提供的数据。

• 最后一步是创建图表对象并将其发送到[startRaceHandler]。
  所有之前的方法都将包含在 [startRaceHandler]中。


然后我们可以指定最适合我们的主题（外观和感觉）。

NPM 启动

说明和项目已准备就绪。最后一步是运行我们的项目。与其他文章一样，我们只需要在终端中运行命令“npm start”。

正如我们所见，开始比赛功能将控制每根柱的速度和自动分类。这些国家将根据 COVID 病例的数量上下移动。

加入LightningChart技术交流群：786598704 ，了解更多咨询。

Lightning Chart 提供各种主题 (UI)，这种类型的图表可以用于移动应用程序、Web 应用程序和桌面应用程序。可能性很多，可以帮助您提供更完整、更专业的产品。更多案例探究，点击LightningChart JS 使用教程了解更多信息。

想要了解或购买LightningChart JS正版授权的朋友，欢迎咨询官方客服

标签：