原創(chuàng)|使用教程|編輯:龔雪|2014-07-22 09:53:16.000|閱讀 13822 次
概述:本文講解Highchart加載(load)和重繪(redraw)的知識(shí),該部分依舊是Highchart圖表事件(chart.events)的重要組成部分。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
Highchart圖表完成加載啟動(dòng)。this 關(guān)鍵詞表示圖表項(xiàng)目本身。參數(shù),event傳遞功能。這包含基于jQuery或 MooTools,取決于你選取的基本Highgcharts圖表庫(kù)。
注意,從Highcharts 2.0.4, Highcharts.Chart有第二個(gè)參數(shù),在圖表加載的時(shí)候可以傳遞一個(gè)回調(diào)函數(shù)。
代碼示例:
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
load: function(event) {
var label = this.renderer.label('Chart loaded', 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
series: [{
animation: false,
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]
}]
});
});
效果圖:

圖表重繪時(shí)啟動(dòng)。返回chart.redraw() 或者在軸、點(diǎn)、系列在redraw 選項(xiàng)設(shè)置為true時(shí)修改。這包含基于jQuery或 MooTools,取決于你選取的基本Highgcharts圖表庫(kù)。
代碼示例:
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
redraw: function() {
var label = this.renderer.label('The chart was just redrawn', 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
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]
}]
});
// activate the button
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addSeries({
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
});
$('#button').unbind('click');
});
});
效果圖:


本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都控件網(wǎng)