Highcharts 中文社区

查看: 4185|回复: 7

[代码共享] 自定义导出图片按钮设计

[复制链接]
  • TA的每日心情
    开心
    2017-6-15 13:18
  • 签到天数: 191 天

    [LV.7]常住居民III

    14

    主题

    49

    帖子

    788

    积分

    HC 老手

    Rank: 3Rank: 3

    积分
    788
    发表于 2016-8-16 21:30:08 | 显示全部楼层 |阅读模式
    HighCharts的图片导出功能很好,但是在操作的美观度上可以再上一个台阶。
    HighCharts默认的图片导出按钮是一个位于图表右上角的“汉堡包”键。现在我来自定义这个按钮,把它变得好看一点儿!!

    美观后的效果图如下所示:

    r.png

    我编写的代码如下:

    http://code.hcharts.cn/xxttxx/VV9Twj

    本帖被以下淘专辑推荐:

  • TA的每日心情
    奋斗
    2017-7-17 01:51
  • 签到天数: 29 天

    [LV.4]偶尔看看III

    9

    主题

    43

    帖子

    324

    积分

    HC 熟手

    Rank: 2

    积分
    324
    发表于 2016-8-17 06:54:58 | 显示全部楼层
    学习了,不错。
  • TA的每日心情
    开心
    2019-12-18 13:31
  • 签到天数: 750 天

    [LV.10]以坛为家III

    14

    主题

    867

    帖子

    1万

    积分

    HC 神人

    看我签名看我签名看我签名看我签名看我签名看我签名看我签名看我

    Rank: 8Rank: 8

    积分
    11547

    最佳新人活跃会员热心会员发帖之王突出贡献论坛元老

    发表于 2016-8-17 11:42:46 | 显示全部楼层
    不错, 很灵活,不过这样不支持resize,在hc内建方法中,exporting是支持图形按钮的,
    1. exporting:{
    2.     buttons:{
    3.         buttonName:{
    4.             symbol:"url(http://xxxx.png)",
    5.             // 略....
    6.             onclick:function(){
    7.             }
    8.         }
    9.     }
    10. }
    复制代码

    请用HCode:  http://code.hcharts.cn/ 创建一个在线实例重现你的问题,然后分享链接,便于共同调试。
  • TA的每日心情
    开心
    2017-6-15 13:18
  • 签到天数: 191 天

    [LV.7]常住居民III

    14

    主题

    49

    帖子

    788

    积分

    HC 老手

    Rank: 3Rank: 3

    积分
    788
     楼主| 发表于 2016-8-19 08:44:47 | 显示全部楼层
    宽宽 发表于 2016-8-17 11:42
    不错, 很灵活,不过这样不支持resize,在hc内建方法中,exporting是支持图形按钮的,

    ...

    试了试exporting的图形按钮,感觉设置css style比较麻烦(或者说我不会设置),且mouse hover这个图形按钮时的样式比较丑陋,并会显示出类似<img alt='undefined' />的提示文字的效果。
  • TA的每日心情
    开心
    2019-12-18 13:31
  • 签到天数: 750 天

    [LV.10]以坛为家III

    14

    主题

    867

    帖子

    1万

    积分

    HC 神人

    看我签名看我签名看我签名看我签名看我签名看我签名看我签名看我

    Rank: 8Rank: 8

    积分
    11547

    最佳新人活跃会员热心会员发帖之王突出贡献论坛元老

    发表于 2016-8-19 11:59:37 | 显示全部楼层
    Phil 发表于 2016-8-19 08:44
    试了试exporting的图形按钮,感觉设置css style比较麻烦(或者说我不会设置),且mouse hover这个图形按 ...

    请用HCode:  http://code.hcharts.cn/ 创建一个在线实例重现你的问题,然后分享链接,便于共同调试。

    该用户从未签到

    0

    主题

    1

    帖子

    20

    积分

    HC 新手

    Rank: 1

    积分
    20
    发表于 2016-12-16 11:09:56 | 显示全部楼层
    宽宽 发表于 2016-8-17 11:42
    不错, 很灵活,不过这样不支持resize,在hc内建方法中,exporting是支持图形按钮的,

    ...

    兄弟,这个symbol 能用本地的图片吗? 还是只能url(http://...)
  • TA的每日心情
    擦汗
    2017-2-27 14:49
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    5

    帖子

    132

    积分

    HC 新手

    Rank: 1

    积分
    132

    最佳新人

    发表于 2017-2-22 18:42:35 | 显示全部楼层
    感谢 学习了
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表