「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用（二）
LightningChart JS是Web上性能特高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用从而实现高刷新率和流畅的动画常用于贸易工程航空航天医药和其他领域的应用。在上文中我们主要介绍了SQL仪表板应用程序、项目概述、技术要求等内容本文将继续介绍SQL Server无API自动化、Angular开发、图表开发等内容持续关注我们哦~SQL Server No-API自动化如果您有使用SQL Server的经验理解表的实体关系是没有问题的。尽管这些查询看起来很难理解但它们将作为您进行调整的基础。如何在没有API的情况下自动化SQL Server流程使用CMD Shell命令将JSON文件保存到与Angular项目共享的路径中。创建在特定日期时间执行存储过程的SQL Server JOB。恢复备份时必须使用恢复工具然后你必须选择[Device] [add]选项找到.bak文件最后确认并运行备份。Angular开发使用Visual Studio Code您将需要打开SQL Dashboard项目一旦打开将看到以下结构在安装项目依赖项之前node_modules文件夹将不可用。为此您必须打开一个新的终端并运行npm install命令。您需要在电脑上安装Angular才能执行它的命令可以通过执行下面的命令来实现npm install -g angular/cli.全局属性(-g)会全局安装Angular并允许您在本地计算机上使用包中的代码作为一组工具。一旦项目配置好了就可以继续代码审查了。App.component组件是Angular应用中最基本的UI构建块Angular组件是指令的一个子集总是与模板相关联App组件是Angular在从头生成项目时创建的。我们将使用这个组件作为父组件它将包含仪表板的内容。HTML文件将包含导航栏和主体其他模板将在其上呈现。header classnavbar navbar-dark sticky-top shadow stylebackground-color: #3F4858; div classcontainer-fluid a classnavbar-brand href#LightningChart - Article Ranking Analysis/a button classnavbar-toggler typebutton>NgModule({ declarations: [ AppComponent, RankingComponent, DonutChartComponent, StepSeriesChartComponent, HorizontalBarChartComponent, VerticalBarChartComponent, ],路由路由器通过将浏览器URL解释为改变视图的指令来实现导航条形图中的每个菜单项都必须添加到路由器中const appRoutes:Routes[ { path:rank, component:RankingComponent}, ];RankingComponent是我们的排名视图的组件它将包含仪表板图表。li classnav-item a classnav-link href/rankingRanking/a /li图表开发在Charts文件夹中我们将找到4-Dashboard图表的组件组件具有相同的结构CSS、HTML、Typescript在每个CSS文件中我们将看到为HTML div元素指定了一个以像素为单位的高度div { height: 350px;}由于图表组件将在其HTML结构中只使用一个DIV(将包含图表的DIV)因此将为图表分配一个最大高度以防止图表过大或过小。在HTML文件中我们将创建包含图表的divdiv [id]100/div我们将为它分配一个ID以帮助LightningChart JS查找并分配将显示图表的HTML对象。Component.ts这个文件将包含创建图表的逻辑首先我们将看到帮助构建图表的模块以及实现图表所需的Angular模块import { Component, Input, AfterViewInit, OnChanges, OnDestroy } from angular/core; import { lightningChart, ChartXY, Point, PieChartTypes, UIElementBuilders, LegendBoxBuilders, Themes, SliceLabelFormatters, UIOrigins, UIDraggingModes, emptyFill, emptyLine, AxisTickStrategies, SolidFill, SolidLine, Animator, transparentFill, Chart, PieChart, ColorRGBA } from arction/lcjs; import donutdata from ../../../assets/data/data.json;有一个JSON文件导入该文件将包含由SQL Server存储过程(getDashboardJSONData)生成的JSON。let TOTAL_NUMBER_ARTICLES_CATEGORY donutdata.TOTAL_NUMBER_ARTICLES_CATEGORYJSON对象将被分配给一个变量该变量稍后将用于映射和格式化数据。授权JSON对象将包含授权许可的字符串并将分配给LightningChart JS库的授权许可属性const lc lightningchart({license: licenseJson.license}) this.chart lc .BarChart({ type. BarChartTypes.Horizontal, theme: Themes.lightningNature, container: 200, })您可以获得一个免费的使用LightningChart JS授权有了这个授权您将能够访问完整的库并继续实施这个项目。要更新license必须进入文件license并替换它的值{license:xxx-xxxx}容器属性必须具有与HTML文件中创建的DIV元素相同的组件ID包含JSON文件的变量将用于为图表提供所需的格式for (let i 0; i TOTAL_NUMBER_ARTICLES_CATEGORY.length; i) { totalVisitor TOTAL_NUMBER_ARTICLES_CATEGORY[i].ARTICLES_COUNT; processedData.push({ name: ${TOTAL_NUMBER_ARTICLES_CATEGORY[i].CATEGORY}, value: TOTAL_NUMBER_ARTICLES_CATEGORY[i].ARTICLES_COUNT }) }JSON映射和格式化代码将根据图表而更改视觉属性也会有所不同但是每个属性都可以在官方的LightningChart JS文档中查阅所有图表组件的导入模块和授权设置将保持不变。Component({ selector: app-donut-chart, templateUrl: ./donut-chart.component.html, styleUrls: [./donut-chart.component.css] })上面的代码显示了三个属性每个属性引用一个HTML模板和一个样式文件。selector属性告诉Angular只要在HTML模板中找到相应的标签就创建一个该组件的实例。选择器值很重要因为我们将通过它将每个图表组件加载到Ranking组件中。篇幅有限更多精彩内容我们下期再见......
的构建与验证：从Hebb规则到能量函数稳定性)
