Highcharts 静态分页

草，为毛。先粘上代码，就不能在代码前面写字。

非要先写字，再粘代码。坑爹……

demo：

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(‘‘)
					+ ‘</div></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);

}

Highcharts 静态分页,布布扣,bubuko.com

Highcharts 静态分页

原文：http://my.oschina.net/u/576223/blog/304655