当前位置：首页 > news >正文

Highcharts 扩展开发文档说明

news 2026/5/11 20:27:10

Highcharts 扩展开发

自版本2.3起，Highcharts采用模块化设计，便于扩展。

主要的图表概念对应于 JavaScript 的原型或“类”，这些类在 Highcharts 命名空间中显示出来，且可以方便地进行修改。例如Highcharts.Series,Highcharts.Tooltip,Highcharts.Chart,Highcharts.Axis,Highcharts.Legend等。查看完整列表的类。
构造函数的逻辑因此被保留在一个方法中，init，以便覆盖初始化过程。
添加事件可以通过addEvent:
Highcharts.addEvent(chart, 'load', someFunction);
一些原型和属性列在 api.highcharts.com 上，但并非全部。未列出的原型和属性意味着它们可能会在未来的版本中发生变化，因为我们在优化和调整库。我们并不反对使用这些成员，但提醒您，您的插件应在未来版本的 Highcharts 中进行测试。可以通过检查 Highcharts 命名空间以及开发者工具中生成的图表对象，或者研究highcharts.src.js的源代码来识别这些成员。

封装一个插件

Highcharts插件应当包裹在一个匿名自执行函数中，以防止变量污染全局作用域。一个好的做法是这样包裹插件：

(function(H){const{Chart,Series}=H;// shortcuts to Highcharts classesletlocalVar;// local variabledoSomething();}(Highcharts));

在图表初始化时加载扩展

事件可以添加到类和实例中。为了在每个图表上都初始化扩展，可以在Chart类上添加一个事件监听器。

H.addEvent(H.Chart,'load',function(e){constchart=e.target;H.addEvent(chart.container,'click',function(e){e=chart.pointer.normalize(e);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的工具，它可以包装现有的原型方法（“方法”），允许你在其前后添加自己的代码。

wrap函数的第一个参数是父对象，第二个参数是要包裹的函数名，第三个参数是一个回调替代函数。原始函数作为第一个参数传递给替代函数，原始参数紧随其后。

代码示例：

H.wrap(H.Series.types.line.prototype,'drawGraph',function(proceed){// Before the original functionconsole.log("We are about to draw the graph: ",typeofthis.graph);// Now apply the original function with the original arguments,// which are sliced off this function's argumentsproceed.apply(this,Array.prototype.slice.call(arguments,1));// Add some code after the original functionconsole.log("We just finished drawing the graph: ",typeofthis.graph);});

上手试一试

在加载ES模块时，可以直接访问模块。

扩展示例

案例：客户希望在Highcharts Stock的柱状系列中使用标记（“轨迹球”）。目前，标记功能仅支持线性系列。为了实现这个功能，可以编写一个小插件。

这个插件会在每个系列中添加一个轨迹球，前提是该系列尚未支持或包含标记。

为此，我们从以下代码开始，创建一个自执行函数来包含这个插件：

(function(H){// This is a self executing function// The global variable Highcharts is passed along with a reference H}(Highcharts));

之后，我们需要为Tooltip.prototype.refresh和Tooltip.prototype.hide方法添加额外的功能。为此，我们会对这些方法进行包装：

(function(H){H.wrap(H.Tooltip.prototype,'refresh',function(proceed,points){// When refresh is called, code inside this wrap is executed});}(Highcharts));

当调用刷新时，我们希望它在每个系列的当前点上绘制一个轨迹球。如果某个系列已经包含标记，则应跳过此功能。

H.wrap(H.Tooltip.prototype,'refresh',function(proceed,points){// Run the original proceed methodproceed.apply(this,Array.prototype.slice.call(arguments,1));// For each point add or update trackballH.each(points,function(point){// Function variablesvarseries=point.series,chart=series.chart,pointX=point.plotX+series.xAxis.pos,pointY=H.pick(point.plotClose,point.plotY)+series.yAxis.pos;// If trackball functionality does not already existif(!series.options.marker){// If trackball is not definedif(!series.trackball){// Creates a new trackball with same color as the seriesseries.trackball=chart.renderer.circle(pointX,pointY,5).attr({fill:series.color,stroke:'white','stroke-width':1,zIndex:5}).add();}else{// Updates the position of the trackballseries.trackball.attr({x:pointX,y:pointY});}}});});

现在轨迹球会显示出来，但我们还需要在工具提示被移除时将其隐藏。因此，隐藏方法中也需要添加一些额外的功能。在包含插件的函数内部添加了一个新的包装：

H.wrap(H.Tooltip.prototype,'hide',function(proceed){varseries=this.chart.series;// Run original proceed methodproceed.apply(this);// For each series destroy trackballH.each(series,function(serie){vartrackball=serie.trackball;if(trackball){serie.trackball=trackball.destroy();}});});