彩票走势图

JS图表控件LightningCharts JS使用教程:创建 JavaScript 饼图

翻译|使用教程|编辑:董玉霞|2022-05-31 11:42:51.163|阅读 266 次

概述:LightningChart是一个专注于数据表示的 API,使用各种图表(2D 和 3D),具有直观的实现和与各种开发平台的广泛兼容性。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

LightningChart是一个专注于数据表示的 API,使用各种图表(2D 和 3D),具有直观的实现和与各种开发平台的广泛兼容性。

目前有两种使用 LightingCharts 进行开发的解决方案。

  • LightningChart .NET 用于桌面应用程序(支持 WPF、UWP 和 WinForms)
  • LightningChart JS 用于 Web、移动和桌面应用程序。

今天,我们将做一个简短的教程,介绍如何使用 Node JS、TypeScript 和 LigningCharts JS 生成饼图。

首先需要获取LigningCharts JS:

LightningCharts JS官方正版下载

JS图表控件LightningCharts JS

TypeScript 是使用LightningChart JS开发的预期框架,因此建议在此编程语言下实现。

 要执行本教程,建议至少有 Node JS 和 Visual Studio Code 的使用经验。

Node JS 和 TypeScript 等技术的使用在移动应用程序和 Web 开发中变得越来越普遍。 它们是高度通用的技术,可以轻松实现插件和 API。

在开始之前,需要有一个允许编辑 javascript 和 typescript 文件的开发平台。

对于此示例,我们将使用 Visual Studio Code。

有了简单的介绍,让我们开始吧:

最初模板
  1. 下载将帮助我们开始使用此示例的初始模板。
  2. 下载模板后,我们将在Visual Studio Code中打开整个文件夹:
  3. JS图表控件LightningCharts JS

    JS图表控件LightningCharts JS

    注意:如果你还不熟悉 Node JS 之类的项目;在这些项目中,您会找到一个名为:package.json 的文件。

    package.json 文件将包含运行项目所需的所有依赖项或库的列表。

    这样做的目的是不必下载所有依赖项都存储在“node_modules”文件夹中的项目。

  4. 打开一个新终端并运行 npm install 命令:

JS图表控件LightningCharts JS

JS图表控件LightningCharts JS

执行该命令后,我们将在终端中看到一系列下载。

如果我们检查文件资源管理器,我们将看到创建了一个名为“node_modules”的文件夹。

该文件夹将包含与我们的“package.json”文件中指定的每个依赖项对应的所有文件。

数据源
  1. 完成项目的初始设置后,我们将开始创建数据。对于此示例,我们将创建一个“JSON”文件,其中包含将显示在 LightningChart 中的数据。
  2. JS图表控件LightningCharts JS

    我们将右键单击“src”文件夹,然后选择“新建文件”选项。就我而言,我决定将我的文件命名为:

    JS图表控件LightningCharts JS

    对于您的项目,您可以将其命名为您认为合适的任何名称。您只需将名称“城市”替换为文件名(在所有代码中),一切都应该正常工作。

    在我们的新文件中,我们将编写以下 JSON 结构(您可以使用自己的值添加更多成员):

    JS图表控件LightningCharts JS

    {
       "chartName": "Cities from Finland",
       "members":[
       {
           "name":"Helsinki",
           "population": 1305893,
           "id":"FN101"
       },
       {   
           "name":"Tampere",
           "population": 341696,
           "id":"FN102"
       }
    ]}
  3. 现在,打开“tsconfig.json”文件。我们必须添加以下行:
  4. JS图表控件LightningCharts JS

    {
       "compilerOptions": {
                     "outDir": "./dist",
          "module": "commonjs",
                     "target": "es5",
                     "esModuleInterop": true,
                     "resolveJsonModule": true,
          "lib": [
              "es2015",
                                "dom"
                    ]    }
    }
    “ resolveJsonModule”选项允许我们将 JSON 模块导入 TypeScript 模块。

LightningChart JS | 下载试用

以上就是关于LightningChart JS使用教程中使用 NodeJS、TypeScript 和 LightningChart 创建 JavaScript 饼图序第一部分的内容,下篇将介绍饼形图的相关内容。

欢迎LightningChart技术交流群,获取最新产品咨询:740060302

LightningChart JS是性能最高的JavaScript图表库,专注于实时数据可视化。

想要了解或购买LightningChart JS正版授权的朋友,欢迎咨询


标签:

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


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP