LightningChart JS是Web上性能特高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用从而实现高刷新率和流畅的动画常用于贸易工程航空航天医药和其他领域的应用。在上文中我们主要介绍了SQL仪表板应用程序的SQL Server No-API自动化、Angular开发、图表开发等本文将继续介绍该应用程序的排名、Data.json及Angular项目运行等。排名RankingComponent将加载图表的其余组件每个图表组件将在通过排序调用时执行因此不必担心该组件中的进程我们只需要使用它们的selector选择器来调用或执行它们。SQL仪表板卡上的数据在卡片的情况下因为它们只是显示特定值的HTML模板我们可以提取位于JSON文件中的这些值并将它们分配给可以在排名HTML中使用的变量export class RankingComponent { ARTICLES_TOTAL ${data.ARTICLES_SUMMARY[0].ARTICLES_TOTAL}; AUTHORS_TOTAL ${data.ARTICLES_SUMMARY[0].AUTHORS_TOTAL}; HIGHER_RANKING ${data.ARTICLES_SUMMARY[0].HIGHER_RANKING}; LOWER_RANKING ${data.ARTICLES_SUMMARY[0].LOWER_RANKING}; VIEWS_TOTAL ${data.ARTICLES_SUMMARY[0].VIEWS_TOTAL}; URL_IMPRESSIONS_TOTAL ${data.ARTICLES_SUMMARY[0].URL_IMPRESSIONS_TOTAL}; AVG_DURATION_TOTAL ${data.ARTICLES_SUMMARY[0].AVG_DURATION_TOTAL}; }!-- Ranking HTML-- div classcard div classcard-header style background-color: #6f7d96;color: white;font-size: large;border: noneArticle Summary:/div div classcard-body styled-card div classrow div classcol-sm-6 div classrow row-cols-1 row-cols-md-3 g-4 div classcol div classcard div classcard-content div classcard-body styled-shadow div classmedia d-flex div classalign-self-center i classicon-pencil primary font-large-2 float-left/i /div div classmedia-body text-right h1{{ARTICLES_TOTAL | number}}/h1 figure blockquote pTotal Number of Articles/p /blockquote figcaption classblockquote-footer cite titleSource TitleOnly published in lightningchart.com/cite /figcaption /figure为了在SQL仪表板中显示图表我们需要像使用HTML标记一样使用组件选择器。为了使图表整齐地显示并响应其余的HTML代码我们必须将其包含在Bootstrap HTML结构中div classcard styled-card div classcard-header style background-color: #6f7d96;color: white;font-size: large;border: noneViews Chart:/div div classcard-body styled-card div classrow div classcol-sm-12 figure classtext-center blockquote classblockquote pCount of articles by author/p /blockquote figcaption classblockquote-footer cite titleSource TitleCount of all items in the selected time period/cite /figcaption /figure app-horizontal-bar-chart/app-horizontal-bar-chart响应性下面是SQL指示板响应性的一些示例当您使用选择器调用图表组件时它将根据TypeScript文件中的代码进行处理结果将在Ranking HTML中呈现。Data.json该文件位于assets文件夹中您必须在这里粘贴从数据库获得的结果。当您在浏览器中刷新站点时数据将立即获得。如果查看每个组件的导入您会注意到包含JSON文件的变量指向assets-data文件夹的路径。运行Angular项目ng serve命令构建、部署、服务并显示我们的代码变更编译成功后我们可以打开终端指定的路径来查看项目** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **最终应用程序示例结论LightningChart JS图表组件与Angular和Bootstrap完全兼容(即使在Android和iOS应用中也是如此)LightningChart JS的实现也非常简单允许与用户进行高级交互不需要编程或添加额外的代码。本例中显示的图表非常简单您可以使用任何2D和3D图表甚至是面向处理数十万个数据点的图表。
「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用（三）
发布时间：2026/7/13 22:15:24
LightningChart JS是Web上性能特高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用从而实现高刷新率和流畅的动画常用于贸易工程航空航天医药和其他领域的应用。在上文中我们主要介绍了SQL仪表板应用程序的SQL Server No-API自动化、Angular开发、图表开发等本文将继续介绍该应用程序的排名、Data.json及Angular项目运行等。排名RankingComponent将加载图表的其余组件每个图表组件将在通过排序调用时执行因此不必担心该组件中的进程我们只需要使用它们的selector选择器来调用或执行它们。SQL仪表板卡上的数据在卡片的情况下因为它们只是显示特定值的HTML模板我们可以提取位于JSON文件中的这些值并将它们分配给可以在排名HTML中使用的变量export class RankingComponent { ARTICLES_TOTAL ${data.ARTICLES_SUMMARY[0].ARTICLES_TOTAL}; AUTHORS_TOTAL ${data.ARTICLES_SUMMARY[0].AUTHORS_TOTAL}; HIGHER_RANKING ${data.ARTICLES_SUMMARY[0].HIGHER_RANKING}; LOWER_RANKING ${data.ARTICLES_SUMMARY[0].LOWER_RANKING}; VIEWS_TOTAL ${data.ARTICLES_SUMMARY[0].VIEWS_TOTAL}; URL_IMPRESSIONS_TOTAL ${data.ARTICLES_SUMMARY[0].URL_IMPRESSIONS_TOTAL}; AVG_DURATION_TOTAL ${data.ARTICLES_SUMMARY[0].AVG_DURATION_TOTAL}; }!-- Ranking HTML-- div classcard div classcard-header style background-color: #6f7d96;color: white;font-size: large;border: noneArticle Summary:/div div classcard-body styled-card div classrow div classcol-sm-6 div classrow row-cols-1 row-cols-md-3 g-4 div classcol div classcard div classcard-content div classcard-body styled-shadow div classmedia d-flex div classalign-self-center i classicon-pencil primary font-large-2 float-left/i /div div classmedia-body text-right h1{{ARTICLES_TOTAL | number}}/h1 figure blockquote pTotal Number of Articles/p /blockquote figcaption classblockquote-footer cite titleSource TitleOnly published in lightningchart.com/cite /figcaption /figure为了在SQL仪表板中显示图表我们需要像使用HTML标记一样使用组件选择器。为了使图表整齐地显示并响应其余的HTML代码我们必须将其包含在Bootstrap HTML结构中div classcard styled-card div classcard-header style background-color: #6f7d96;color: white;font-size: large;border: noneViews Chart:/div div classcard-body styled-card div classrow div classcol-sm-12 figure classtext-center blockquote classblockquote pCount of articles by author/p /blockquote figcaption classblockquote-footer cite titleSource TitleCount of all items in the selected time period/cite /figcaption /figure app-horizontal-bar-chart/app-horizontal-bar-chart响应性下面是SQL指示板响应性的一些示例当您使用选择器调用图表组件时它将根据TypeScript文件中的代码进行处理结果将在Ranking HTML中呈现。Data.json该文件位于assets文件夹中您必须在这里粘贴从数据库获得的结果。当您在浏览器中刷新站点时数据将立即获得。如果查看每个组件的导入您会注意到包含JSON文件的变量指向assets-data文件夹的路径。运行Angular项目ng serve命令构建、部署、服务并显示我们的代码变更编译成功后我们可以打开终端指定的路径来查看项目** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **最终应用程序示例结论LightningChart JS图表组件与Angular和Bootstrap完全兼容(即使在Android和iOS应用中也是如此)LightningChart JS的实现也非常简单允许与用户进行高级交互不需要编程或添加额外的代码。本例中显示的图表非常简单您可以使用任何2D和3D图表甚至是面向处理数十万个数据点的图表。
)
