Axure加载图表

Axure加载图表，图表模式使用的是JSchart的免费版本。
1、登录JSchart官网下载图表模板，http://www.jscharts.com/examples，图表类型有折线图、柱状图、饼形图。

JSchart模板.png

2、解压下载下来的压缩包JSCharts3_demo.zip，打开以下路径的文件夹JSCharts3_demo\examples\line-charts\example-1，找到index.html，复制一份到本地命名为lineChart1.html。并将lineChart1.html文件的编码格式改为【gb2312】,引用JavaScript的路径改为【src="jscharts.js"】，图标标题改为【折线图】。另外，可以通过修改其他参数达到你想要的效果。修改详情如下图所示：

修改前后对比.png

3、打开Axure，拖入一个【内联框架】元件，属性设置为【从不显示框架滚动条、隐藏边框、自定义预览图片】，双击元件链接属性设置超链接到【lineChart1.html】

Axure操作.png

4、发布>>生成HTML文件，将lineChart1.html及文件路径JSCharts3_demo\sources下的jscharts.js文件一起放到生成项目的根目录下。

Axure生成的HTML项目.png

5、运行项目，查看效果。

运行效果.png

6、你会发现，图片上有JScharts的图标，如果想要除去此标志，请打开jscharts.js文件,搜索【fs.bg.2v(fX)】将其删除即可实现。注意要删除两处位置，重点是前一处。

修改js文件.png

最终效果图：

最终效果图.png

7、柱状图、饼形图操作流程参照折线图，效果图如下：

柱状图.png

饼形图.png