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
好文不易,鼓励一下吧!