[ExtJs] line chart

[ExtJs] line chart

ExtJs launched four chart functions after ExtJs4. Although the chart functions can be implemented through other JQuery plug-ins, for example, [jQuery] is compatible with the IE6 chart plug-in Highcharts (click to open the link), but this ExtJs chart plug-in is also very good, at least some common charts are also useless.

 

I. Basic Objectives

Draw the following discount chart:

 

Ii. Production Process

First, define a data entity for the project where ExtJs is used to draw charts. Similarly, define a data entity for the project that interacts with [ExtJs] and the query of the grid with a paging table component in the background database (click to open the link.

 

 Ext.define('graphData',{extend:'Ext.data.Model',fields:[{name:'graphName',type:'string'},{name:'graphData',type:'int'}]});

 

Then, declare the data in the data entity:

 

Var graphDataStore = Ext. create ('ext. data. store', {model: 'graphdata', data: [{graphName: January, graphData: 700}, {graphName: February, graphData: 800}, {graphName: March, graphData: 600 },{ graphName: April, graphData: 500}]});

If the data is provided by the backend page, write as follows:

 

Var graphDataStore = Ext. create ('ext. data. store', {model: 'graphdata', proxy: {type: 'ajax ', url: 'showdata. php ', // page reader: {type: 'json', root: 'data', }}, autoLoad: true} that provides Json strings });

The following string is printed on the showData. php page:

 

{'Success': true, 'data': [{graphName: January, graphData: 700}, {graphName: February, graphData: 800}, {graphName: March, graphData: 600 },{ graphName: April, graphData: 500}]}

Draw a line chart:

 

 

Var chart = new Ext. chart. Chart ({// the following four items must be specified. Otherwise, it cannot be displayed. Width: 480, height: 320, store: graphDataStore, renderTo: Ext. getBody (), axes: [{// declare the type: 'numeric ', position: 'left', fields: 'graphdata'}, and {type: 'category ', position: 'bottom', fields: 'graphname'}], series: [{// declare what type: 'line' is used to fill data on the x and Y axes, respectively ', axis: 'left', xField: 'graphname', yField: 'graphdata'}]});

 

<Script type = text/javascript src = .. /js/ext-all.js> </script> <script type = text/javascript src = .. /js/bootstrap. js> </script> <script type = text/javascript src = .. /js/ext-lang-zh_CN.js> </script>