Axure加载图表,图表模式使用的是JSchart的免费版本。
1、登录JSchart官网下载图表模板,http://www.jscharts.com/examples,图表类型有折线图、柱状图、饼形图。
2、解压下载下来的压缩包JSCharts3_demo.zip,打开以下路径的文件夹JSCharts3_demo\examples\line-charts\example-1,找到index.html,复制一份到本地命名为lineChart1.html。并将lineChart1.html文件的编码格式改为【gb2312】,引用JavaScript的路径改为【src="jscharts.js"】,图标标题改为【折线图】。另外,可以通过修改其他参数达到你想要的效果。修改详情如下图所示:
3、打开Axure,拖入一个【内联框架】元件,属性设置为【从不显示框架滚动条、隐藏边框、自定义预览图片】,双击元件链接属性设置超链接到【lineChart1.html】
4、发布>>生成HTML文件,将lineChart1.html及文件路径JSCharts3_demo\sources下的jscharts.js文件一起放到生成项目的根目录下。
5、运行项目,查看效果。
6、你会发现,图片上有JScharts的图标,如果想要除去此标志,请打开jscharts.js文件,搜索【fs.bg.2v(fX)】将其删除即可实现。注意要删除两处位置,重点是前一处。
最终效果图:
7、柱状图、饼形图操作流程参照折线图,效果图如下: