软件项目技术点(12)——绘制生成的图表到canvas

 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的作用（文本换行，生成图片）

 

最后，给大家看看一个完整的效果演示视频。