天天看點
傳回

extjs area chart sample

<!--extjs 的代码-->
           
    
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

Ext.onReady(function () {
    
    
    var chart = Ext.create('Ext.chart.Chart', {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: store1,
            legend: {
                position: 'bottom'
            },
            axes: [{
                type: 'Numeric',
                grid: true,
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                title: 'Number of Hits',
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
            }],
            series: [{
                type: 'area',
                highlight: false,
                axis: 'left',
                xField: 'name',
                yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                style: {
                    opacity: 0.93
                }
            }]
        });
    
    var win = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        minHeight: 400,
        minWidth: 550,
        hidden: false,
        shadow: false,
        maximizable: true,
        title: 'Area Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Save Chart',
            handler: function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }, {
            text: 'Reload Data',
            handler: function() {
                store1.loadData(generateData());
            }
        }, {
            enableToggle: true,
            pressed: true,
            text: 'Animate',
            toggleHandler: function(btn, pressed) {
                var chart = Ext.getCmp('chartCmp');
                chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
            }
        }],
        items: chart
    }); 
});
           
        

 <!--extjs sample的一段 html -->            
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Area Chart</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" target="_blank" rel="external nofollow"  />
    <link rel="stylesheet" type="text/css" href="../shared/example.css" target="_blank" rel="external nofollow"  />

    <!-- GC -->

    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../example-data.js"></script>
    <script type="text/javascript" src="Area.js"></script>
<script>

</script>

</head>
    <body id="docbody">
    <h1>Area Chart Sample</h1>
    <div style="margin: 10px;">
    <p>
        Display 7 sets of random data in an area series. Reload data will randomly generate a new set of data in the store. Click or hover on the legend items to highlight and remove them from the chart.  The bottom axis has had it's labels rotated. <a href="Area.js" target="_blank" rel="external nofollow" >View Source</a>
    </p>
    </div>
    </body>
</html>
           
        
 
 
 

  
javascipt
上一篇: 保齡球規則
下一篇: jdk15不需要配置環境變量_mac不需要配置Java環境變量

繼續閱讀