Highcharts 中文社区

 找回密码
 立即注册
查看: 1063|回复: 1

[官方插件] 给坐标轴添加箭头的插件

[复制链接]
  • TA的每日心情
    奋斗
    2019-5-21 10:00
  • 签到天数: 261 天

    [LV.8]以坛为家I

    30

    主题

    888

    帖子

    4190

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    4190

    最佳新人活跃会员

    QQ
    发表于 2017-4-25 16:47:06 | 显示全部楼层 |阅读模式
    本帖最后由 简数科技 于 2017-4-25 16:50 编辑

    分享一个给坐标轴添加箭头的插件。

    在线实例:https://code.hcharts.cn/jianshu/9dtzyu
    QQ图片20170425165128.png

    使用方式

    引入对应的 js 文件
    1. <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    2. <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    3. <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-axis-arrow.js"></script>
    复制代码


    引入插件后,默认会给每个坐标轴添加箭头(有坐标轴线时才添加),可以通过 axis.arrow = false 来关闭箭头,示例代码如下
    1. Highcharts.chart('container', {
    2.   yAxis: [{
    3.     lineWidth: 1,
    4.     lineColor: 'black',
    5.     arrow: true,
    6.     reversed: true // reversed axis arrow
    7.   }, {
    8.     opposite: true,
    9.     linkedTo: 0,
    10.     lineWidth: 1,
    11.     lineColor: 'red',
    12.     // arrow: false // diabled axis arrow
    13.   }],

    14.   xAxis: [{
    15.     lineColor: 'black',
    16.     reversed: true
    17.   }, {
    18.     // enabled by default
    19.     opposite: true,
    20.     linkedTo: 0,
    21.   }],
    22.   series: [{
    23.     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    24.   }]
    25. });
    复制代码




    本帖被以下淘专辑推荐:

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts

    该用户从未签到

    0

    主题

    1

    帖子

    18

    积分

    HC 新手

    Rank: 1

    积分
    18
    发表于 2018-5-24 11:46:44 | 显示全部楼层
    请问怎么在vue里引进此插件,我试过不行
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

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

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