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的作用（文本换行，生成图片）
最后，给大家看看一个完整的效果演示视频。