原創|使用教程|編輯:龔雪|2014-05-16 10:25:46.000|閱讀 12938 次
概述:通過使用highcharts api,很多使用者根據自己的需求制作了Highcharts插件,實現了各種功能擴展。關于highcharts 中文教程資源已經比較多了,而擴展這一塊的highcharts教程相對比較少。今天,我們就來深入研究highcharts擴展功能。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Highcharts強大的擴展功能,是它深受廣大用戶喜愛的原因之一。通過使用highcharts api,很多使用者根據自己的需求制作了highcharts插件,實現了各種功能擴展。關于highcharts 中文教程資源已經比較多了,而擴展這一塊的highcharts教程相對比較少。今天,我們就來深入研究highcharts擴展功能,為大家奉上制作插件的highcharts 中文教程。
自從2.3版本以來,Highcharts就一直以模塊化的方式在擴展:
和jQuery插件一樣,Highcharts插件也需要用匿名的自動執行函數來封裝,以防隱藏全局變量。 好的封住方法如下:
(function (H) {
var localVar, // local variable
Series = H.Series; // shortcut to Highcharts prototype
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);
});
});
效果圖

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]
}]
});
有著動態特性的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();
}
});
});
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件網