ITPub博客

首页 > 应用开发 > IT综合 > highcharts静态分页

highcharts静态分页

IT综合 作者:8wy821029 时间:2016-03-09 11:44:33 0 删除 编辑
对x轴进行分页显示, chrome都不能插入代码,靠!!

点击(此处)折叠或打开

  1. $(function () {
  2.     new HighchartsPager('container',4, {
  3.         title: {
  4.             text: 'Monthly Average Temperature',
  5.             x: -20 //center
  6.         },
  7.         subtitle: {
  8.             text: 'Source: WorldClimate.com',
  9.             x: -20
  10.         },
  11.         xAxis: {
  12.             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  13.         },
  14.         yAxis: {
  15.             title: {
  16.                 text: 'Temperature (°C)'
  17.             },
  18.             plotLines: [{
  19.                 value: 0,
  20.                 width: 1,
  21.                 color: '#808080'
  22.             }]
  23.         },
  24.         tooltip: {
  25.             valueSuffix: '°C'
  26.         },
  27.         legend: {
  28.             layout: 'vertical',
  29.             align: 'right',
  30.             verticalAlign: 'middle',
  31.             borderWidth: 0
  32.         },
  33.         series: [{
  34.             name: 'Tokyo',
  35.             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]
  36.         }, {
  37.             name: 'New York',
  38.             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]
  39.         }, {
  40.             name: 'Berlin',
  41.             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]
  42.         }, {
  43.             name: 'London',
  44.             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]
  45.         }]
  46.     });
  47. });

  48. function HighchartsPager(id, pageSize, options) {
  49.     this.id = id;
  50.     options.chart = options.chart || {};
  51.     options.chart.renderTo = id;
  52.     this._options = $.extend({}, options);
  53.     this._xAxis = options.xAxis;
  54.     this._series = options.series;
  55.      
  56.     this._total = 0;
  57.     if(this._xAxis.categories){
  58.         this._total = this._xAxis.categories.length
  59.     }else{
  60.         this._total = this._series[0].data.length;
  61.     }
  62.     this.toPage(this._total, pageSize);
  63.     this.chart = null;
  64.     //this.chart = new Highcharts.Chart(options);
  65.      
  66.     this.showPage(1);
  67.      
  68.     return this.chart;
  69. }
  70.  
  71. HighchartsPager.prototype.showPageBar = function(pageTotal) {
  72.     var the = this;
  73.     var arr = [];
  74.     var suffixStr = '-pagebar-div';
  75.     for ( var i = 0; i < pageTotal; i++) {
  76.         arr.push('<a style="margin-right: 10px;text-decoration : underline; cursor: pointer; font-size: 11px;">'
  77.                         + (i + 1) + '</a>');
  78.     }
  79.     $('#' + this.id).append(
  80.             '<center><div style="border:0px red solid; height: 30px; width: 300px;" id="'
  81.                     + this.id + suffixStr + '">' + arr.join('')
  82.                     + '
</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);
  •  
  • }
  • HTML:

    点击(此处)折叠或打开

    1. <div id="container" style="min-width:400px;height:400px"></div>

    下面是对series的分页显示

    点击(此处)折叠或打开

    1. $(function () {
    2.     new HighchartsPager('container',1, {
    3.         title: {
    4.             text: 'Monthly Average Temperature',
    5.             x: -20 //center
    6.         },
    7.         subtitle: {
    8.             text: 'Source: WorldClimate.com',
    9.             x: -20
    10.         },
    11.         xAxis: {
    12.             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    13.         },
    14.         yAxis: {
    15.             title: {
    16.                 text: 'Temperature (°C)'
    17.             },
    18.             plotLines: [{
    19.                 value: 0,
    20.                 width: 1,
    21.                 color: '#808080'
    22.             }]
    23.         },
    24.         tooltip: {
    25.             valueSuffix: '°C'
    26.         },
    27.         legend: {
    28.             layout: 'vertical',
    29.             align: 'right',
    30.             verticalAlign: 'middle',
    31.             borderWidth: 0
    32.         },
    33.         series: [{
    34.             name: 'Tokyo',
    35.             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]
    36.         }, {
    37.             name: 'New York',
    38.             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]
    39.         }, {
    40.             name: 'Berlin',
    41.             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]
    42.         }, {
    43.             name: 'London',
    44.             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]
    45.         }]
    46.     });
    47. });

    48. function HighchartsPager(id, pageSize, options) {
    49.     this.id = id;
    50.     options.chart = options.chart || {};
    51.     options.chart.renderTo = id;
    52.     this._options = $.extend({}, options);
    53.     this._xAxis = options.xAxis;
    54.     this._series = options.series;
    55.      
    56.     this._total = 0;
    57.     if(this._series.length){
    58.         this._total = this._series.length;
    59.     }else{
    60.         this._total = 4;
    61.     }
    62.     this.toPage(this._total, pageSize);
    63.     this.chart = null;
    64.     //this.chart = new Highcharts.Chart(options);
    65.      
    66.     this.showPage(1);
    67.      
    68.     return this.chart;
    69. }
    70.  
    71. HighchartsPager.prototype.showPageBar = function(pageTotal) {
    72.     var the = this;
    73.     var arr = [];
    74.     var suffixStr = '-pagebar-div';
    75.     for ( var i = 0; i < pageTotal; i++) {
    76.         arr.push('<a style="margin-right: 10px;text-decoration : underline; cursor: pointer; font-size: 11px;">'
    77.                         + (i + 1) + '</a>');
    78.     }
    79.     $('#' + this.id).append(
    80.             '<center><div style="border:0px red solid; height: 30px; width: 300px;" id="'
    81.                     + this.id + suffixStr + '">' + arr.join('')
    82.                     + '
    </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);
  •     var series = [];
  •     var series_child = null;
  •  
  •     if(this._series){
  •         for ( var i = (pageNum - 1) * this._page.pageSize; i < Math.min(this._total, pageNum * this._page.pageSize); i++) {
  •            series.push(this._series[i]);
  •         }
  •     };
  •     return {
  •         xAxis : xAxis,
  •         series : series
  •     };
  • }
  •  
  • HighchartsPager.prototype.removeData = function() {
  •     if (this.chart == null) {
  •         return;
  •     }
  •     for(var i=0; i<this.chart.series.length; i++){
  •         this.chart.series[i].remove(true);
  •     }
  • }




  • 来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/16989139/viewspace-2051743/,如需转载,请注明出处,否则将追究法律责任。

    上一篇: 关于servlet返回数据方式的总结
    下一篇: mysql批量导出多张表结构
    请登录后发表评论 登录
    全部评论

    注册时间:2015-05-18

    最新文章