javascript - 如何使用 'pagination' 制作 Extjs 4.2 条形图

Question

我在 jsonStore 中有超过 100 个项目(它以二维方式加载，因此功能中可能会更多)，并且希望使用图表显示它们。不幸的是，一次渲染所有功能将使图表不可读。我想以 20 个项目为一组显示它们。 如何添加“分页”机制？是否可以为要渲染的数据添加限制和偏移量？

Answer 1

是的。对附加到图表的存储进行本地/远程分页就足够了。

Ext.require([
  'Ext.chart.*',
  'Ext.Window',
  'Ext.fx.target.Sprite',
  'Ext.layout.container.Fit',
  'Ext.window.MessageBox'
]);

Ext.onReady(function() {

  window.generateData = function(n, floor) {
    var data = [],
      p = (Math.random() * 11) + 1,
      i;

    floor = (!floor && floor !== 0) ? 20 : floor;

    for (i = 0; i < (n || 12); i++) {
      data.push({
        name: Ext.Date.monthNames[i % 12],
        data1: Math.floor(Math.max((Math.random() * 100), floor)),
        data2: Math.floor(Math.max((Math.random() * 100), floor)),
        data3: Math.floor(Math.max((Math.random() * 100), floor)),
        data4: Math.floor(Math.max((Math.random() * 100), floor)),
        data5: Math.floor(Math.max((Math.random() * 100), floor)),
        data6: Math.floor(Math.max((Math.random() * 100), floor)),
        data7: Math.floor(Math.max((Math.random() * 100), floor)),
        data8: Math.floor(Math.max((Math.random() * 100), floor)),
        data9: Math.floor(Math.max((Math.random() * 100), floor))
      });
    }
    return data;
  };


  window.store1 = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
    data: generateData(),
    pageSize: 3,
    page: 0
  });

  window.doFilter = function() {
    var k = 0,
      start = store1.page * store1.pageSize;

    store1.clearFilter();
     if(start<0) start = 0;// add the max page test :P

    store1.filter(function(r) {
      return k++ >= start && k <= start + store1.pageSize;
    });
  }
  doFilter();
  var chart = Ext.create('Ext.chart.Chart', {
    style: 'background:#fff',
    animate: true,
    shadow: true,
    store: store1,
    axes: [{
      type: 'Numeric',
      position: 'left',
      fields: ['data1'],
      label: {
        renderer: Ext.util.Format.numberRenderer('0,0')
      },
      title: 'Number of Hits',
      grid: true,
      minimum: 0
    }, {
      type: 'Category',
      position: 'bottom',
      fields: ['name'],
      title: 'Month of the Year'
    }],
    series: [{
      type: 'column',
      axis: 'left',
      highlight: true,
      tips: {
        trackMouse: true,
        renderer: function(storeItem, item) {
          this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
        }
      },
      label: {
        display: 'insideEnd',
        'text-anchor': 'middle',
        field: 'data1',
        renderer: Ext.util.Format.numberRenderer('0'),
        orientation: 'vertical',
        color: '#333'
      },
      xField: 'name',
      yField: 'data1'
    }]
  });


  var win = Ext.create('Ext.panel.Panel', {
     renderTo:Ext.getBody(),
    width: 500,
    height: 300,
    minHeight: 300,
    minWidth: 550,
    hidden: false,
    maximizable: true,
    title: 'Column Chart',
    autoShow: true,
    layout: 'fit',

    items: chart,
    tbar: [{
      text: 'Prev',
      handler: function() {
        store1.page--;
        doFilter();
      }
    }, {
      text: 'Next',
      handler: function() {
        store1.page++;
        doFilter();
      }
    }]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-debug-w-comments.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-debug.css" rel="stylesheet" />