矢量Chart图表嵌入HTML5网络拓扑图的应用

2024-08-30 11:58
文章标签 html5 应用 图表 frontend 嵌入 矢量 chart 网络拓扑

本文主要是介绍矢量Chart图表嵌入HTML5网络拓扑图的应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发有 Chart 需求的项目的时候，感觉很痛苦，HT 集成的 Chart 组件中，并不包含有坐标，在展现方面不是很直观，但是也不是没有解决方案，接下来我们就来聊聊具体的解决方案。

首先，第一种解决方案是，在定义 Chart 矢量的时候在 comps 中除了定义 Chart 外，再添加几个你自定义的绘制区域来绘制你想要的坐标轴，效果及 example 如下：


该 Chart 的定义代码见附录1(代码的定义太长)，代码虽然长，但是代码的逻辑并不乱，各个模块间的矢量描述还是比较清晰的，具体可以参考 HT 的矢量手册，看到如此长的代码，我自己都没信心去维护它，维护这样的代码纯粹是体力活，而且复用性也不高，每一个不同的 Chart 都要类似如此地绘制，绘制一两个这样的图表感觉还好，绘制多了，真心会感觉很恶心，再这上面很浪费时间。

其次，第二种解决方案是，通过数据绑定来自定义绘制坐标轴。实现以上相同效果，其代码见附录2。可以明显看出其代码量会比第一种解决方案好很多，而且代码可以复用。在其他的图表中，可以将横轴和纵轴的文本内容设置到 data 的 attr 属性上，并在定义 chart 时使用上如下代码就可以实现坐标文本的效果：

ht.Default.setImage('chartName', {width: Number,height: Number,comps: [{// define chart},{type: 'xAxis',rect: Array},{type: 'yAxis',rect: Array}]
});

在这里我已经通过 ht.Default.setCompType('typeName', function(g, rect, comp, data, view){}) 的方法定义了名字为 xAxis 和 yAxis 的CompType，这两个 CompType 分别绘制了横轴和纵轴的坐标文本，代替了第一种方案制定多个 CompType 为 text 的写法，稍微优化了下代码，提高代码的可维护性。

但是，这样但使用方法总刚觉有些别扭，明明坐标轴是 Chart 的一部分，在定义 Chart 上却要硬生生地将图表和坐标部分分开，那如果用户还要在定义标题、坐标刻度、坐标说明等需求，那这个方案还是无法爽快的解决大部分通用的需求，需要定义许多 CompType 来渲染不同的需求，而且在使用上也不是那么爽快。接下来要说明的方案三，就是来解决使用上及维护上的问题。

最后，第三种解决方案是，和第二种解决方案差不多，都是通过 ht.Default.setCompType('typeName', function(g, rect, comp, data, view){}) 的方法来定义名字为 axisChart 的 CompType，不同的是，数据并不是设置到 data 中，而是在 ht.Default.setImage() 的 comps 中直接定义其相关属性。具体的配置属性说明及其具体的代码实现可以查看附件，使用方式很简单，在引入 ht.js 核心文件的前提下，引入附件的 axisChart.js 文件即可。

接下来来看下 axisChart 的具体使用及几个简单的例子：

例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图：


代码如下：

ht.Default.setImage('c1', {width: 600,height: 400,comps: [{type: 'axisChart',rect: [0, 0, 600, 400],yAxis: [{name: '单位：V',max: 270,min: 150,splitNumber: 10,axisTitle: {text: '电压',rotate: -90},axisLine: {arrow: true}},{position: 'right',name: '单位：I',max: 20,splitNumber: 20,axisTitle: {text: '电流',rotate: 90},axisLabel: {interval: 1},axisLine: {arrow: true}}],xAxis: [{type: 'category',data: ['抚梅源', '藕花深处', '紫东花园', '紫金苑', '华府山水', '水云间', '瑞景新城'],axisTitle: {text: '小区名称'}}],series: [{label: function(value){return value + ' V';},data: {values: [220, 210, 200, 209, 230, 215, 218],color: '#f90'}},{yAxisPosition: 'right',label: true,data: {values: [10, 4, 15, 9, 12, 18, 7],color: '#af0'}}]}]
});

例2: 不同时刻，不同小区的电压情况的折线图：


代码如下：

ht.Default.setImage('c2', {width: 600,height: 400,comps: [{type: 'axisChart',rect: [0, 0, 600, 400],yAxis: [{name: '单位：V',max: 240,min: 190,splitNumber: 10,axisTitle: {text: '电压',rotate: -90},axisLine: {arrow: true}}],xAxis: [{type: 'time',min: new Date(2015, 0, 1),max: new Date(2015, 0, 2),splitNumber: 25,axisTitle: {text: '时间'},axisLabel: {interval: 2,formatter: function(value, index, min, max){return value.format('dd-hh');}},axisLine: {arrow: true}}],series: [{type: 'line',data: {values: [220, 210, 200, 209, 230, 215, 218, 220, 210, 200, 209, 230, 215, 218, 209, 230, 215, 218, 220, 210, 200, 209, 230, 215, 218],color: '#f90'}},{type: 'line',data: {values: [225, 209, 208, 206, 205, 221, 213, 224, 218, 224, 205, 208, 216, 220, 208, 210, 219, 219, 210, 209, 219, 207, 222, 222, 215],color: '#7d0'}},{type: 'line',linePoint: true,line3d: true,data: {values: [211, 216, 215, 205, 206, 206, 223, 217, 217, 215, 212, 221, 219, 222, 205, 208, 205, 218, 223, 222, 207, 215, 215, 222, 223],color: '#ab0'}}]}]
});

最后，还有一点要说明，axisChart 的代码并不是那么的无懈可击，我个人觉得代码设计上还是有些欠缺，所有的代码总共有差不多 1000 行，我觉得太臃肿了，在设计上自己也感觉不是那么的友好，等想修改的时候发现已经投入太多时间了，还有好多事情等待着我我去学习、去探讨，所以也就线这样吧，等有空了再重构一番，但是我相信在功能上还是能够满足大部分的需求，在设计上，或者是实现的方法上，还是在使用过程中发现的 bug，还望大家能够不吝赐教。


附录1

ht.Default.setImage('chart', {width: 650,height: 380,comps: [// column chart{type: 'columnChart',rect: [10, 60, 630, 260],label: true,labelColor: '#20284C',labelFont: '8px Arial',series: [{color: '#20284C',values: [471, 482, 567, 525, 590, 637, 780, 679, 848]},{color: '#303F74',values: [275, 290, 361, 328, 346, 341, 440, 423, 505]},{color: '#7E93CD',values: [82, 104, 115, 118, 135, 154, 198, 197, 247]},{color: '#A9B6DB',values: [65, 78, 87, 87, 113, 130, 167, 159, 213]}]},// 竖线{type: 'rect',rect: [15, 60, 1, 260],background: '#566CB0'},{type: 'shape',rect: [5.5, 30, 20, 30],borderWidth: 1,borderColor: '#566CB0',points: [0, 20 / 3 * 2, 20 / 2, 0, 20, 20 / 3 * 2, 20 / 2, 0, 20 / 2, 30],segments: [1, 2, 2, 1, 2]},// 坐标文本{type: 'text',rect: [0, 320 - 26 * 10 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 10)},{type: 'text',rect: [0, 320 - 26 * 9 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 9)},{type: 'text',rect: [0, 320 - 26 * 8 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 8)},{type: 'text',rect: [0, 320 - 26 * 7 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 7)},{type: 'text',rect: [0, 320 - 26 * 6 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 6)},{type: 'text',rect: [0, 320 - 26 * 5 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 5)},{type: 'text',rect: [0, 320 - 26 * 4 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 4)},{type: 'text',rect: [0, 320 - 26 * 3 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 3)},{type: 'text',rect: [0, 320 - 26 * 2 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 2)},{type: 'text',rect: [0, 320 - 26 * 1 - 8, 15, 16],align: 'right',text: Math.round(84.8 * 1)},{type: 'text',rect: [0, 320 - 8, 15, 16],align: 'right',text: 0},// Q{type: 'text',rect: [55, 322, 0, 16],align: 'center',text: 'Q2\'11'},{type: 'text',rect: [124, 322, 0, 16],align: 'center',text: 'Q3\'11'},{type: 'text',rect: [191, 322, 0, 16],align: 'center',text: 'Q4\'11'},{type: 'text',rect: [259, 322, 0, 16],align: 'center',text: 'Q1\'12'},{type: 'text',rect: [327, 322, 0, 16],align: 'center',text: 'Q2\'12'},{type: 'text',rect: [394, 322, 0, 16],align: 'center',text: 'Q3\'12'},{type: 'text',rect: [462, 322, 0, 16],align: 'center',text: 'Q4\'12'},{type: 'text',rect: [529, 322, 0, 16],align: 'center',text: 'Q1\'13'},{type: 'text',rect: [596, 322, 0, 16],align: 'center',text: 'Q2\'13'},// line{type: 'rect',rect: [15, 320, 620, 1],background: '#566CB0'},{type: 'shape',rect: [635, 310.5, 30, 20],borderWidth: 1,borderColor: '#566CB0',points: [20 / 3 * 2, 0, 30, 20 / 2, 20 / 3 * 2, 20, 30, 20 / 2, 0, 20 / 2],segments: [1, 2, 2, 1, 2]}]
});

附录2

ht.Default.setCompType('yAxis', function(g, rect, comp, data, view) {var labels = data.a('yLabels'),len = labels.length,x = rect.x,y = rect.y,w = rect.width,h = rect.height,dh = h / (len - 1);g.save();g.font = '12px arial, sans-serif';g.fillStyle = 'black';g.textAlign = 'right';for(var i = 0; i < len; i++){g.fillText(labels[i], x, y);y += dh;}g.restore();
});ht.Default.setCompType('xAxis', function(g, rect, comp, data, view) {var labels = data.a('xLabels'),len = labels.length,x = rect.x,y = rect.y,w = rect.width,h = rect.height,dw = w / (len * 3 + 1),dw3 = 3 * dw;x += dw * 2;g.save();g.font = '12px arial, sans-serif';g.fillStyle = 'black';g.textAlign = 'center';for(var i = 0; i < len; i++){g.fillText(labels[i], x, y);x += dw3;}g.restore();
});ht.Default.setImage('chart1', {width: 650,height: 380,comps: [// column chart{type: 'columnChart',rect: [10, 60, 630, 260],label: true,labelColor: '#20284C',labelFont: '8px Arial',series: [{color: '#20284C',values: [471, 482, 567, 525, 590, 637, 780, 679, 848]},{color: '#303F74',values: [275, 290, 361, 328, 346, 341, 440, 423, 505]},{color: '#7E93CD',values: [82, 104, 115, 118, 135, 154, 198, 197, 247]},{color: '#A9B6DB',values: [65, 78, 87, 87, 113, 130, 167, 159, 213]}]},// 竖线{type: 'rect',rect: [15, 60, 1, 260],background: '#566CB0'},// 向上的箭头{type: 'shape',rect: [5.5, 30, 20, 30],borderWidth: 1,borderColor: '#566CB0',points: [0, 20 / 3 * 2, 20 / 2, 0, 20, 20 / 3 * 2, 20 / 2, 0, 20 / 2, 30],segments: [1, 2, 2, 1, 2]},// 坐标文本{type: 'yAxis',rect: [12, 60, 15, 260]},// Q{type: 'xAxis',rect: [10, 330, 630, 16]},// line{type: 'rect',rect: [15, 320, 620, 1],background: '#566CB0'},// 向右的箭头{type: 'shape',rect: [635, 310.5, 30, 20],borderWidth: 1,borderColor: '#566CB0',points: [20 / 3 * 2, 0, 30, 20 / 2, 20 / 3 * 2, 20, 30, 20 / 2, 0, 20 / 2],segments: [1, 2, 2, 1, 2]}]
});

这篇关于矢量Chart图表嵌入HTML5网络拓扑图的应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1120755。

相关文章

mysql_mcp_server部署及应用实践案例

mysql_mcp_server部署及应用实践案例

《mysql_mcp_server部署及应用实践案例》文章介绍了在CentOS7.5环境下部署MySQL_mcp_server的步骤,包括服务安装、配置和启动,还提供了一个基于Dify工作流的应用案例... 目录mysql_mcp_server部署及应用案例1. 服务安装1.1. 下载源码1.2. 创建独立
阅读更多...
C#高效实现在Word文档中自动化创建图表的可视化方案

C#高效实现在Word文档中自动化创建图表的可视化方案

《C#高效实现在Word文档中自动化创建图表的可视化方案》本文将深入探讨如何利用C#,结合一款功能强大的第三方库,实现在Word文档中自动化创建图表,为你的数据呈现和报告生成提供一套实用且高效的解决方... 目录Word文档图表自动化：为什么选择C#？从零开始：C#实现Word文档图表的基本步骤深度优化：C
阅读更多...
Python使用Matplotlib和Seaborn绘制常用图表的技巧

Python使用Matplotlib和Seaborn绘制常用图表的技巧

《Python使用Matplotlib和Seaborn绘制常用图表的技巧》Python作为数据科学领域的明星语言,拥有强大且丰富的可视化库,其中最著名的莫过于Matplotlib和Seaborn,本篇... 目录1. 引言：数据可视化的力量2. 前置知识与环境准备2.1. 必备知识2.2. 安装所需库2.3
阅读更多...
HTML5的input标签的`type`属性值详解和代码示例

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea（严格
阅读更多...
SpringBoot返回文件让前端下载的几种方式

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存，通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流
阅读更多...
SpringBoot+Vue3整合SSE实现实时消息推送功能

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现（SpringBoot）前端实现（vue3）1. 数据类型定义2.
阅读更多...
Nginx内置变量应用场景分析

Nginx内置变量应用场景分析

《Nginx内置变量应用场景分析》Nginx内置变量速查表,涵盖请求URI、客户端信息、服务器信息、文件路径、响应与性能等类别,这篇文章给大家介绍Nginx内置变量应用场景分析,感兴趣的朋友跟随小编一... 目录1. Nginx 内置变量速查表2. 核心变量详解与应用场景3. 实际应用举例4. 注意事项Ng
阅读更多...
前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2
阅读更多...
Java中的随机数生成案例从范围字符串到动态区间应用

Java中的随机数生成案例从范围字符串到动态区间应用

《Java中的随机数生成案例从范围字符串到动态区间应用》本文介绍了在Java中生成随机数的多种方法,并通过两个案例解析如何根据业务需求生成特定范围的随机数,本文通过两个实际案例详细介绍如何在java中... 目录Java中的随机数生成：从范围字符串到动态区间应用引言目录1. Java中的随机数生成基础基本随
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2