现金炸金花,真钱牛牛,斗牛棋牌

现金炸金花|手机斗牛|牛牛棋牌

技能进阶篇——内联图表

 

图表是绘制原型时的常用控件,之前在整理控件库时,现金炸金花|手机斗牛|牛牛棋牌是在 PS 里修改图表样式,导出图片做成控件。因为是图片格式,实际在用的时候要修改挺麻烦的,而且也没有动态效果。用 Axure 的内联框架引入 Highcharts,通过编辑代码调整图表样式,可以帮现金炸金花|手机斗牛|牛牛棋牌节省不少时间,而且生成的原型也包含图表动态效果。

.
.
step1 下载 Highcharts 基础实例
现金炸金花|手机斗牛|牛牛棋牌选用的是 Highcharts 的图表库,它是国外开发的,有 Highcharts中文站。没有选用百度的 Echarts,是因为内联需要指向 html 文件,Highcharts 可下载图表 JS 和 HTML 文件,Echarts 3.0 仅可以下载图表 JS 文件。虽然在 Echarts 2.0 版本里可以下载 HTML ,但是下载下来是整个站,页面里除了图表之外还有菜单、代码编辑区、底部说明这些冗余内容。Highcharts 和 Echarts 二者功能不相上下,看到一句比喻“Highcharts 和 Echarts 就像是 Office 和 WPS 的关系”,挺有趣的。
.
Highcharts下载中心 有三个压缩包:Highcharts、Highstock、Highmaps。有 Highcharts 和 Highmaps 两个包,就可以满足现金炸金花|手机斗牛|牛牛棋牌所有的常用图表需求了。
.
step2 拖入文件夹,调整代码
将解压的 Highcharts 图表文件夹拖入 Axure 生成的 HTML 文件夹中。图表的 HTML 都放在 samples 这个文件夹里,选择要用的图表类型,编辑代码调整图表样式(建议用 Sublime Text 编辑)。
图表默认显示导出按钮和水印,会影响展示效果,要用语句设置隐藏。
保存代码后,双击打开页面,复制页面的相对路径(下图蓝底色部分)。
.
step3 设置图表内联
回到 Axure ,拖入内联框架,调整为合适的宽高,点击“切换边框可见性”隐藏边框。点击“选择框架目标”选择“链接到url或文件”,粘贴上一步复制的相对路径。
.
.
预览时是看不到图表的,会显示文件找不到,生成之后就可以看到了。气泡悬浮、显隐线条、时间轴缩放这些动效都有。
4