HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

创建插件

最后修改时间:2022-12-15 18:35

Highcharts 2.3 开始提供二次扩展功能,可以通过以下方式进行扩展:

  • 图表中包含的对象通过 JavaScript prototype 或 class 的形式暴露给 Highcharts 命名空间,这些都可以很方便的进行重写,这些对象包括 Highcharts.Legend、Highcharts.Series、Highcharts.Tooltip、Highcharts.Chart 等,详见 API 文档 - 函数及属性部分。

  • 初始化函数 Chart.init 可以进行重写

  • 事件可以通过使用的框架添加到对应的图表实例中,例如在 jQuery 中,可以通过 $(chart).bind('load', someFunction) 添加相关的事件

  • API 文档列举的函数及属性,可以直接进行重新,另外 API 中没有列举的函数也可以修改。没有列举的函数或属性是因为未来可能会变更,所以在重写这些函数或属性时,记得在未来版本的 Highcharts 中进行测试。Highcharts 中所有函数及属性请阅读源码

插件的形式扩展

同 jQuery 插件一样,为了防止插件里的变量污染全局变量,所以建议以闭包的形式编写 Highcharts 的插件,实例如下

(function(H) {
  var localVar,        // 插件内部变量
    Series = H.Series; // H 为简写的 Highcharts 命名空间

  // 具体执行的业务逻辑
  doSomething();
}(Highcharts));

Chart.init 函数钩子

给已经实例化的图表元素添加事件时,可以在图表初始渲染后添加回调函数,实现方法是在 Chart.prototype.callbacks 数组里添加相关的函数,实例如下:

H.Chart.prototype.callbacks.push(function(chart) {
  H.addEvent(chart.container, 'click', function(e) {
    e = chart.pointer.normalize();
    console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY);
  });
  H.addEvent(chart.xAxis[0], 'afterSetExtremes', function(e) {
    console.log('Set extremes to ' + e.min + ', ' + e.max);
  });
});

在线试一试

通过 prototype 重新函数

JavaScript 在动态更改脚本行为方面表现的非常强大。在 Highcharts 内部,我们创建了一个工具函数 wrap,该函数可以在现有原型函数执行之前或之后添加自己的业务代码,其构造及参数说明如下:

Highcharts.wrap(object obj, String methodName, function callback)

  • obj:需要封装的函数的父级对象
  • methodName: 函数名
  • callback: 回调函数

其中原始函数以第一个参数传递给封装函数,原始函数的其他参数在第一个参数后传递给封装函数,下面是示例代码:

H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {

  // 原始函数执行之前编写的逻辑代码
  console.log("We are about to draw the graph: ", this.graph);

  // 执行原始函数(proceed), arguments 为原始函数参数(第一个参数是原始函数)
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));

  // 原始函数执行之后的逻辑代码
  console.log("We just finished drawing the graph: ", this.graph);
});

在线试一试

示例插件:Highstock 轨迹球

客户需要在股票图成交量数据列中添加数据点标识(轨迹球),默认情况下,只有线形图才有点标识,所以我们用插件来实现了这个功能,下面是实现过程:

1、创建闭包代码块

(function (H) {
  // 闭包结构,其中 H 为全局 Highcharts 变量
}(Highcharts));

2、重写相关的方法

数据点标识(marker) 是在鼠标划过数据点显示的,并在鼠标划出时隐藏,这和提示框交互是类似的,所有我们可以通过重写 Tooltip.prototype.refresh 和 Tooltip.prototype.hide 来实现,这里用 Highcharts.wrap 工具函数来进行二次封装

(function(H) {
  H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
    // 二次封装 Tooltip.refresh 函数
  });

  H.wrap(H.Tooltip.prototype, 'hide', function(proceed, points) {
    // 二次封装 Tooltip.hide 函数
  });
}(Highcharts));

3、编写具体的逻辑

封装 refresh 函数

H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
  // 执行原始函数
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  // 对每个数据点进行添加或更新轨迹球
  H.each(points, function(point) {
    // 先关变量
    var series = point.series,
      chart = series.chart,
      pointX = point.plotX + series.xAxis.pos,
      pointY = H.pick(point.plotClose, point.plotY) + series.yAxis.pos;

    if (!series.options.marker) {
      if (!series.trackball) {
        // 创建轨迹球
        series.trackball = chart.renderer.circle(pointX, pointY, 5).attr({
          fill: series.color,
          stroke: 'white',
          'stroke-width': 1,
          zIndex: 5
        }).add();
      } else {
        // 更新轨迹球位置
        series.trackball.attr({
          x: pointX,
          y: pointY
        });
      }
    }
  });
});

封装 hide 函数,当提示框隐藏时同时隐藏轨迹球

H.wrap(H.Tooltip.prototype, 'hide', function(proceed) {
  var series = this.chart.series;
  // 执行原始函数
  proceed.apply(this);
  // 对每个数据列进行隐藏轨迹球操作
  H.each(series, function(serie) {
    var trackball = serie.trackball;
    if (trackball) {
      serie.trackball = trackball.destroy();
    }
  });
});

在线试一试

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:创建插件 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/how-to-create-plugins/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22