hightchar_Highcharts中文教程之Highcharts扩展功能（插件制作）

Highcharts强大的扩展功能，是它深受广大用户喜爱的原因之一。通过使用highcharts api，很多使用者根据自己的需求制作了highcharts插件，实现了各种功能扩展。关于

相关资源：

自从2.3版本以来，Highcharts就一直以模块化的方式在扩展：

大部分的图表概念都对应着JavaScript原型或者“类”，它们展现在Highcharts的名字空间中，很容易被修改。例如Highcharts.Series、Highcharts.Tooltip、Highcharts.Chart、Highcharts.Axis、Highcharts.Legend等等。

构造函数逻辑是保存在方法 init 中的，允许覆盖初始化。

事件可以通过远程与框架事件进行绑定。如果你的框架是jQuery，你可以尝试运行 $(chart).bind('load', someFunction); 。

一些原型和属性列举在api.highcharts.com的Methods、Properties中，还有一些没有列出，这表示在优化和改编库时，它们在后续版本中有可能修改。我们不反对使用，但是提醒你的插件应该经过后续版本测试。鉴别这些函数可以通过以下三种方式：检查Highcharts名字空间、检查开发工具中生成的图表类型、学习highcharts.src.js的源代码。

Highcharts插件封装

和jQuery插件一样，Highcharts插件也需要用匿名的自动执行函数来封装，以防隐藏全局变量。 好的封住方法如下：

(function (H) {

var localVar, // local variable

Series = H.Series; // shortcut to Highcharts prototype

doSomething();

}(Highcharts));

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);

});

});

试一试：

效果图

highcharts demo代码：

(function (H) {

Highcharts.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);

});

});

}(Highcharts));

var chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

zoomType: 'x'

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

series: [{

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]

}]

});

Highcharts​函数原型封装

有着动态特性的JavaScript在动态改变脚本行为时非常强大。在Highcharts中可以创建一个名为warp的实例。它可以封装现有的函数原型(“method”)，允许你在这之前或之后向其中添加自己的代码。

wrap函数的第一个参数为父类对象，第二个参数为要封装的函数的名字，第三个参数为回调替换函数。原始函数作为第一个参数传递给替换函数，原始的参数也遵循这个规则。

代码示例：

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

// Before the original function

console.log("We are about to draw the graph: ", this.graph);

// Now apply the original function with the original arguments,

// which are sliced off this function's arguments

proceed.apply(this, Array.prototype.slice.call(arguments, 1));

// Add some code after the original function

console.log("We just finished drawing the graph: ", this.graph);

});

试一试：

效果图

效果图

highcharts demo​代码：

(function (H) {

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

// Before the original function

console.log("We are about to draw the graph:", this.graph);

// Now apply the original function with the original arguments,

// which are sliced off this function's arguments

proceed.apply(this, Array.prototype.slice.call(arguments, 1));

// Add some code after the original function

console.log("We just finished drawing the graph:", this.graph);

});

}(Highcharts));

var chart = new Highcharts.Chart({

chart: {

renderTo: 'container'

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

series: [{

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]

}]

});

小试牛刀

学习之后，我们来实践一下。我们来看一个案例，在这个例子中，客户想要在Highstock的列类型系列使用标记(“trackballs”)，而当前只有线类型系列支持标记。为了实现这个功能，需要编写一个小插件。

这个插件在每个不支持和不包含标记的图表中添加一个trackball。

为了完成这个任务，从以下代码入手：创建一个包含此插件的自动执行函数。

(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));

当调用刷新时，我们希望在每个系列的当前点绘制一个trackball。如果一个系列已经包含了一个标记，这个函数应该被丢弃。

H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {

// Run the original proceed method

proceed.apply(this, Array.prototype.slice.call(arguments, 1));

// For each point add or update trackball

H.each(points, function (point) {

// Function variables

var series = 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 exist

if (!series.options.marker) {

// If trackball is not defined

if (!series.trackball) {

// Creates a new trackball with same color as the series

series.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 trackball

series.trackball.attr({

x: pointX,

y: pointY

});

}

}

});

});

现在trackball已经显示了，但是当工具提示移除后需要隐藏它，因而在隐藏方法里需要一些其他的功能，一个新的封装被添加到了包含这个插件的函数中。

H.wrap(H.Tooltip.prototype, 'hide', function (proceed) {

var series = this.chart.series;

// Run original proceed method

proceed.apply(this);

// For each series destroy trackball

H.each(series, function (serie) {

var trackball = serie.trackball;

if (trackball) {

serie.trackball = trackball.destroy();

}

});

});

标签：JavaScript图表插件highcharts

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果

文章转载自：慧都控件网

22

好文不易，鼓励一下吧！