highcharts静态分页程序员编程网-最新程序员编程前沿技术程序员编程网

对x轴进行分页显示， chrome都不能插入代码，靠！！

点击(此处)折叠或打开

$(function () {
new HighchartsPager(‘container’,4, {
title: {
text: ‘Monthly Average Temperature’,
x: –20 //center
},
subtitle: {
text: ‘Source: WorldClimate.com’,
x: –20
},
xAxis: {
categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’,‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
},
yAxis: {
title: {
text: ‘Temperature (°C)’
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}]
},
tooltip: {
valueSuffix: ‘°C’
},
legend: {
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘middle’,
borderWidth: 0
},
series: [{
name: ‘Tokyo’,
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: ‘New York’,
data: [–0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: ‘Berlin’,
data: [–0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: ‘London’,
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
function HighchartsPager(id, pageSize, options) {
this.id = id;
options.chart = options.chart || {};
options.chart.renderTo = id;
this._options = $.extend({}, options);
this._xAxis = options.xAxis;
this._series = options.series;
this._total = 0;
if(this._xAxis.categories){
this._total = this._xAxis.categories.length
}else{
this._total = this._series[0].data.length;
}
this.toPage(this._total, pageSize);
this.chart = null;
//this.chart = new Highcharts.Chart(options);
this.showPage(1);
return this.chart;
}
HighchartsPager.prototype.showPageBar = function(pageTotal) {
var the = this;
var arr = [];
var suffixStr = ‘-pagebar-div’;
for ( var i = 0; i < pageTotal; i++) {
arr.push(‘<a style=”margin-right: 10px;text-decoration : underline; cursor: pointer; font-size: 11px;”>’
+ (i + 1) + ‘</a>’);
}
$(‘#’ + this.id).append(
‘<center><div style=”border:0px red solid; height: 30px; width: 300px;” id=”‘
+ this.id + suffixStr + ‘”>’ + arr.join(”)
+ ‘

</center>’);

the._current_pageNum = –1;

$(‘#’ + this.id + suffixStr).children().each(function(index) {

$(this).click(function() {

the.showPage(index + 1);

});

}

HighchartsPager.prototype.showPage = function(pageNum) {

var the = this;

var suffixStr = ‘-pagebar-div’;

if (pageNum == the._current_pageNum) {

return;

}

var data = the.pageData(pageNum);

if (the.chart == null) {

var options = $.extend({}, the._options);

options.xAxis = data.xAxis;

options.series = data.series;

the.chart = new Highcharts.Chart(options);

the.showPageBar(the._page.pageTotal);

the._current_pageNum = 1;

$($(‘#’ + the.id + suffixStr).children()[0]).css(‘text-decoration’,

‘none’).css(

‘font-size’, ’13px’).css(

‘font-weight’, ‘bold’);

} else {

the.removeData();

the.chart.addAxis(data.xAxis, true, true);

for ( var i = 0; i < data.series.length; i++) {

the.chart.addSeries(data.series[i], true);

}

if (the._current_pageNum != –1) {

$($(‘#’ + the.id + suffixStr).children()[the._current_pageNum – 1])

.css(‘text-decoration’, ‘underline’).css(

‘font-size’, ’11px’).css(

‘font-weight’, ‘normal’);

}

the._current_pageNum = pageNum;

$($(‘#’ + the.id + suffixStr).children()[pageNum – 1]).css(

‘text-decoration’, ‘none’).css(

‘font-size’, ’13px’).css(

‘font-weight’, ‘bold’);

}

HighchartsPager.prototype.toPage = function(total, pageSize) {

this._page = {

pageSize : pageSize,

pageTotal : (total – total % pageSize) / pageSize

+ (total % pageSize != 0 ? 1 : 0),

total : total

};

}

HighchartsPager.prototype.pageData = function(pageNum) {

var xAxis = $.extend({}, this._xAxis);

if(xAxis.categories){

xAxis.categories = [];

for ( var i = (pageNum – 1) * this._page.pageSize; i < Math.min(this._total, pageNum * this._page.pageSize); i++) {

xAxis.categories.push(this._xAxis.categories[i]);

}

var series = [];

var series_child = null;

for ( var j = 0; j < this._series.length; j++) {

series_child = $.extend({}, this._series[j]);

series_child.data = [];

for ( var i = (pageNum – 1) * this._page.pageSize; i < Math.min(

this._series[j].data.length, pageNum * this._page.pageSize); i++) {

series_child.data.push(this._series[j].data[i]);

}

series.push(series_child);

}

return {

xAxis : xAxis,

series : series

};

}

HighchartsPager.prototype.removeData = function() {

if (this.chart == null) {

return;

}

for ( var i = 0; i < this.chart.xAxis.length; i++) {

//this.chart.xAxis[i].remove();

}

//for(var i=0; i<this.chart.series.length; i++){

//this.chart.series[i].remove(true);

//}

this.chart.xAxis[0].remove(true);

}

主题测试文章，只做测试使用。发布者：℅傍ㄖ免沦陷dε鬼，转转请注明出处：http://www.cxybcw.com/190694.html

highcharts静态分页

联系我们

13687733322

highcharts静态分页

相关推荐

请登录

联系我们

13687733322