<!--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" /> <link rel="stylesheet" type="text/css" href="../shared/example.css" /> <!-- 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">View Source</a> </p> </div> </body> </html>
extjs area chart sample
最新推荐文章于 2022-05-10 15:51:51 发布