最后修改时间: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.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);
});
});
JavaScript 在动态更改脚本行为方面表现的非常强大。在 Highcharts 内部,我们创建了一个工具函数 wrap
,该函数可以在现有原型函数执行之前或之后添加自己的业务代码,其构造及参数说明如下:
Highcharts.wrap(object obj, String methodName, function 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);
});
客户需要在股票图成交量数据列中添加数据点标识(轨迹球),默认情况下,只有线形图才有点标识,所以我们用插件来实现了这个功能,下面是实现过程:
(function (H) {
// 闭包结构,其中 H 为全局 Highcharts 变量
}(Highcharts));
数据点标识(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));
封装 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();
}
});
});
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22