examples/charts/PieRenderer.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
   3
   4 Ext.onReady(function () {
   5     store1.loadData(generateData(5));
   6
   7     var win = Ext.create('Ext.Window', {
   8         width: 800,
   9         height: 600,
  10         hidden: false,
  11         maximizable: true,
  12         title: 'Pie Renderer Chart',
  13         renderTo: Ext.getBody(),
  14         layout: 'fit',
  15         tbar: [{
  16             text: 'Reload Data',
  17             handler: function() {
  18                 store1.loadData(generateData(5));
  19             }
  20         }],
  21         items: {
  22             id: 'chartCmp',
  23             xtype: 'chart',
  24             style: 'background:#fff',
  25             animate: true,
  26             shadow: true,
  27             store: store1,
  28             series: [{
  29                 type: 'pie',
  30                 animate: true,
  31                 angleField: 'data1', //bind angle span to visits
  32                 lengthField: 'data2', //bind pie slice length to views
  33                 highlight: {
  34                   segment: {
  35                     margin: 20
  36                   }
  37                 },
  38                 label: {
  39                     field: 'name',   //bind label text to name
  40                     display: 'rotate', //rotate labels (also middle, out).
  41                     font: '14px Arial',
  42                     contrast: true
  43                 },
  44                 style: {
  45                     'stroke-width': 1,
  46                     'stroke': '#fff'
  47                 },
  48                 //add renderer
  49                 renderer: function(sprite, record, attr, index, store) {
  50                     var value = (record.get('data1') >> 0) % 9;
  51                     var color = [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"][value];
  52                     return Ext.apply(attr, {
  53                         fill: color
  54                     });
  55                 }
  56             }]
  57         }
  58     });
  59 });