Question

我需要显示带有分页的堆积条形图我需要像这样的分页结构/选项： -

[First Previous 12 13 14 15 Next Last]

第一页只需显示此值

'Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'

第二页只需显示此值

'Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1'

第3页需要只显示此值

'Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2'

基于xAxis - Categories值计数我想要显示分页

在此链接中提供示例代码：http://jsfiddle.net/38L9nhhs/2/

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas','Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1','Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2,3, 4, 4, 2, 5,2, 2, 3, 2, 1]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1,5, 3, 4, 7, 2,3, 4, 4, 2, 5]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5,2, 2, 3, 2, 1,5, 3, 4, 7, 2]
    }]
   });
  });

请帮助我实现这个

Answer 1

你基本上需要做的是：

创建一个包含基本元素（橙子，苹果，梨等）的附加数组
根据arrCategories数组中包含的基本元素和元素的数量，在页面启动时构建寻呼机
加载第0页的图表，该图表是没有附加数字的默认页面

以下是相关的代码部分：

HTML

<!-- add a pager below the graph -->
<div id="page-container">Page: <span id="pager"></span></div>

<强> JS

// create the arrays outside of the function scope, otherwise accessing elements later-on
// may cause problems
var arrBaseCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
// arrCategories and arrSeries "data" element must contain the number of arrBaseCategories n-times
var arrCategories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Apples1', 'Oranges1', 'Pears1', 'Grapes1', 'Bananas1', 'Apples2', 'Oranges2', 'Pears2', 'Grapes2', 'Bananas2'];
var arrSeries = [{
  name: 'John',
  data: [5, 3, 4, 7, 2, 3, 4, 4, 2, 5, 2, 2, 3, 2, 1]
}];

function showGraph(page) {

  // number of different elements
  var numDifferentElements = arrBaseCategories.length;
  // first element that needs to be extracted from arrCategories and arrSeries
  var intStartElement = page * numDifferentElements;

  var arrCurrentSeries = [];
  var arrCurrentCategories = [];

  // loop all series for all persons, extract part of the data array for the given page
  for (var elem in arrSeries) {

    var arrSubData = [];

    // extract elements starting from a position based on the page number 
    // from the data array and only pass this one along when creating the chart
    for (var i = 0; i < numDifferentElements; i++) {

      arrCurrentCategories.push(arrCategories[intStartElement + i]);
      arrSubData.push(arrSeries[elem].data[intStartElement + i]);

    }
    arrCurrentSeries.push({
      name: arrSeries[elem].name,
      data: arrSubData
    });

  }

  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: arrCurrentCategories
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: arrCurrentSeries
  });
} // end function showGraph

$(function() {

  // create a pager on start
  function initialisePager() {
    var numPages = Math.ceil(arrCategories.length / arrBaseCategories.length);

    for (i = 0; i < numPages; i++) {
      var link = '<a href="javascript:showGraph(' + i + ')">' + Math.round(i + 1) + '</a>';
      $('#pager').append(link);
    }
  }

  initialisePager();
  showGraph(0);
});

在这里可以找到系列中不止一个人的完整小提琴：

http://jsfiddle.net/Moonbird_IT/38L9nhhs/7/

Highchart堆积了条形图分页

1 个答案: