首页 > 软件开发 > HTML >

Axure引用html

来源:互联网 2023-03-16 19:13:09 457

Axure绘制原型如何做的更为高大上?Echarts引用着实让人受益匪浅,整合前期百度各位大神们的经验,以便后续参考zc0办公区 - 实用经验教程分享!

---------------------zc0办公区 - 实用经验教程分享!

本经验中echarts图表均引用echarts官网demo,如有不当敬请指出!zc0办公区 - 实用经验教程分享!

---------------------zc0办公区 - 实用经验教程分享!

经验中涉及的axure文件、html及步骤图已分享至百度网盘:zc0办公区 - 实用经验教程分享!

https://pan.baidu.com/s/1XK4TSABvwv32olmY87B_zQzc0办公区 - 实用经验教程分享!

提取码:lpzkzc0办公区 - 实用经验教程分享!

工具/原料

  • Axure RP8
  • Echarts【https://www.echartsjs.com/download.html】及已制作好的html图表

方法/步骤

  • 1

    拖拽【内联框架】,具体操作如下:zc0办公区 - 实用经验教程分享!

    Axure新建页面,并拖拽【内联框架】组件,双击【内联框架】,弹出【链接属性】配置窗口。zc0办公区 - 实用经验教程分享!

    注:【选择框架目标】支持3种方式引用html,分别为:相对路径、绝对路径、根目录。zc0办公区 - 实用经验教程分享!

    Axure引用htmlzc0办公区 - 实用经验教程分享!

  • 2

    若使用【相对路径】引用html文件,【超链接】填写如下:zc0办公区 - 实用经验教程分享!

    .\echarts\RelativePath.htmlzc0办公区 - 实用经验教程分享!

    其中,【RelativePath.html】为已提前制作好的echarts图表,【echarts】为存放【RelativePath.html】的文件夹名称zc0办公区 - 实用经验教程分享!

    Axure引用htmlzc0办公区 - 实用经验教程分享!

    Axure引用htmlzc0办公区 - 实用经验教程分享!

  • 3

    若使用【绝对路径】引用html文件,【超链接】填写如下:、zc0办公区 - 实用经验教程分享!

    C:\Users\EZS\Desktop\Axure引用echarts\echarts\AbsolutePath.htmlzc0办公区 - 实用经验教程分享!

    其中,【C:\Users\EZS\Desktop\Axure引用echarts\echarts\AbsolutePath.html】为html所存放的本地电脑路径zc0办公区 - 实用经验教程分享!

    Axure引用htmlzc0办公区 - 实用经验教程分享!

    Axure引用htmlzc0办公区 - 实用经验教程分享!

  • 4

    若使用【绝对路径】引用html文件,【超链接】填写如下:、zc0办公区 - 实用经验教程分享!

    RootDirectory.htmlzc0办公区 - 实用经验教程分享!

    其中,需把已制作好的html【RootDirectory.html】放到原型所生成html根目录文件夹下zc0办公区 - 实用经验教程分享!

    Axure引用htmlzc0办公区 - 实用经验教程分享!

    Axure引用htmlzc0办公区 - 实用经验教程分享!

  • 4该信息未经许可获取自百度经验
  • 注意事项

    • axure需F8生成html格式的原型,方可预览echarts图表
    • 本经验中echarts图表均引用echarts官网demo,如有不当敬请指出!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!zc0办公区 - 实用经验教程分享!


    标签: AXUREHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码