Highcharts 정적 페이지 나누기
5707 단어 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);
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Highcharts 정적 페이지 나누기풀먼저 코드를 붙이면 코드 앞에 글씨를 쓸 수 없다. 굳이 먼저 글을 쓰고 코드를 붙여야 한다.아버지를 괴롭히다. demo: 코드:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.