软件项目技术点(12)——绘制生成的图表到canvas
2023-09-11 14:18:07 时间
AxeSlide软件项目梳理 canvas绘图系列知识点整理
插入图表
首先介绍我们的图表功能,点击插入图表弹出如下数据表格窗口,可以填写表格数据,点击确定,默认生成表格图
编辑图表
表格图选中,可以进行编辑。右侧会出现图标类型,数据编辑,属性设置。这里支持highcharts里面的柱状图,折线图,饼状图,条形图,面积图,散点图。最后一种表格图是我们自己去添加的,和其他的有些不同。之前写过一篇
svg foreignObject的作用(文本换行,生成图片)可以阅读下。
表格插入到canvas
highcharts和自定义的表格类型,最终都是以svg的形式插入到canvas的,这样可以确保缩放后不模糊,保证图表的清晰度。
highcharts图表插入
我们会有个隐藏的容器chart_img,用来接收highchats生成的内容。用过类似插件的都知道这个是在新建对象‘new Highcharts.Chart’的时候去指明的。如果将容器display设置为显示,那么可以看到和插入到canvas的是一样的。
table表格插入
而表格是放到容器table_img中的,我们根据数据生成行列dom结构,如果将display设置显示,可以看到就是跟绘制到canvas的元素是一样的。将table标签内容生成svg可参见 svg foreignObject的作用(文本换行,生成图片)
最后,给大家看看一个完整的效果演示视频。
相关文章
- 技术分享 | 接口测试中,请求超时该怎么办?
- 微服务技术系列教程(36) - SpringCloud-使用Kafka实现消息驱动
- 《Hadoop海量数据处理:技术详解与项目实战(第2版)》一导读
- 《软件测试技术大全:测试基础 流行工具 项目实战(第3版)》—第1章1.5节新手入门须知
- 《Hadoop海量数据处理:技术详解与项目实战(第2版)》一第2章 环境准备
- 软件项目技术点(1)——Tween算法及缓动效果
- 软件项目技术点(25)——提升性能之检测绘制范围
- 软件项目技术点(19)——文件的保存和打开(解压缩)
- 软件项目技术点(1)——游戏主循环机制
- 软件项目技术点(2)——Canvas之获取Canvas当前坐标系矩阵
- 「基于Python技术的智慧中医商业项目」Django前端用户交互设计
- 「基于Python技术的智慧中医商业项目」Django后端新闻应用设计
- 转 Docker 组件如何协作?- 每天5分钟玩转容器技术(8)
- 《敏捷可执行需求说明 Scrum提炼及实现技术》—— 3.2 应用短周期反馈环
- AVOS Cloud 技术支持系统开源了
- 传感器技术—电容式传感器的测量转换电路(学习笔记七 补充)