ExtJS + ASP. NET custom curve, extjsasp.net Curve
Step 1: Create a Store data source
var myData = []; myData.push({ 'name': '1', 'Oil_Production': '30', 'Water_Injection': '55', 'Gas_Production': '23' }); myData.push({ 'name': '2', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '3', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '4', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '5', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '6', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '7', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '8', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '9', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '10', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '11', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); myData.push({ 'name': '12', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); store1 = Ext.create('Ext.data.Store', { fields: ['name', 'Oil_Production', 'Water_Injection', 'Gas_Production'], data: myData });
Step 2: Create a curve
Ext. require ('ext. chart. * '); Ext. require (['ext. window ', 'Ext.fx.tar get. sprite ', 'ext. layout. container. fit ', 'ext. window. messagebox']); Ext. onReady (function () {// store1.loadData (generateData (8); var chart = Ext. create ('ext. chart. chart', {renderTo: Div3, width: 500, height: 300, style: 'background: # fff', animate: true, store: store1, shadow: true, // assign the theme: 'category1', legend: {position: 'right'}, axes: [{type: 'numeric ', minimum: 0, position: 'left', fields: ['oil _ Production ', 'Water _ Injection', 'Gas _ Production '], title: 'nissan oil', minorTickSteps: 0.1, grid: {odd: {opacity: 1, fill: '# ddd', stroke: '# bbb', 'stroke-width': 0.5 }}, {type: 'category ', position: 'bottom ', fields: ['name'], title: 'month'}], series: [{type: 'line', // It indicates the line chart highlight: {size: 7, radius: 7}, axis: 'left', xField: 'name', yField: 'oil _ Production ', markerConfig: {type: 'circle ', // key turning point types: size: 4, radius: 4, 'stroke-width': 0 },{ type: 'line', highlight: {size: 7, radius: 7}, axis: 'left', smooth: true, xField: 'name', yField: 'water _ Injection ', markerConfig: {type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }}, {type: 'line', highlight: {size: 7, radius: 7}, axis: 'left ', smooth: true, xField: 'name', yField: 'Gas _ Production ', markerConfig: {type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }}]}) ;});
How aspnet works with extjs
<Link rel = "stylesheet" href = "ExtJS/EXT/ext-all.css"/>
<Script type = "text/javascript" src = "ExtJS/EXT/ext-base.js"> </script>
<Script type = "text/javascript" src = "ExtJS/EXT/ext-all.js"> </script>
Aspnet is mostly used in combination with jquery or extjs. Both of them want to learn, but they have limited energy.
The Client js framework, ExtJs, and JQuery can all be intelligently prompted.
The ExtJs heavyweight framework is very powerful and highly scalable. It integrates many features of java swt. It should not be said too much, but it is large and not suitable for Internet website development, however, it is very suitable for internal enterprise management systems;
JQuery's Lightweight Framework is highly scalable, but it is not as ready-to-use support library as ExtJs, and is suitable for Internet development;
Depends on demand