ExtJS 5.0 version of the official website for the chart example, with a scatter chart for illustration:
Ext.create (' Ext.container ', { //renderTo:Ext.getBody (),width:600, Height:400, layout:' Fit ', items: {xtype:' Cartesian ', Store: {fields: [' Name ', ' data1 ', ' data2 ', ' data3 ', ' data4 ', ' data5 '], data: [{' Name ': ' Metric One ', ' data1 ': Ten, ' data2 ':, ' data3 ': +, ' data4 ': 8, ' data5 ': 13}, {' Name ': ' Metric ', ' data1 ': 7, ' data2 ': 8, ' data3 ': +, ' data4 ': Ten, ' Data5 ': 3}, {' Name ': ' Metric Three ', ' data1 ': 5, ' data2 ': 2, ' data3 ': +, ' data4 ': $, ' data5 ': 7}, {' Name ': ' Metric Four ', ' data1 ': 2, ' data2 ': +, ' data3 ': 6, ' data4 ': 1, ' data5 ': 23}, {' Name ': ' Metric Five ', ' data1 ':, ' data2 ':, ' data3 ': $, ' data4 ': +, ' data5 ': 33}]}, axes: [{type:' Numeric ', Position:' Left ', fields: [' Data1 '], title: {text:' Sample Values ', FontSize:15}, Grid:true, Minimum:0}, {type:' Category ', Position:' Bottom ', fields: [' Name '], title: {text:' Sample Values ', FontSize:15}}], series: {type:' Scatter ', highlight: {size:7, Radius:7}, fill:true, Xfield:' Name ', Yfield:' Data3 ', Marker: {type:' Circle ', FillStyle:' Blue ', Radius:10, LineWidth:0 } } }});
Different from the previous example, the new example has appeared xtype: ' Cartesian ', if you just introduce ext-charts.js file in the HTML file, will be error, the error situation is as follows:
[Ext.loader] synchronously loading ' widget.cartesian '; Consider adding Ext.require (' Widget.cartesian ') above Ext.onreadyget http://localhost:8088/ exttest/widget/cartesian.js?_dc=1406205106470 404 (Not Found)
Hint can't find Widget.cartesian, search ExtJS installation directory, you can not find widget this folder and Cartesian this JS file, so display Baidu, no data, then Google, there is a little information, roughly speaking ExtJS5.0 different from the previous version, the new version with E Xt-charts.js to the previous version of the example is valid, the new version must use the Packages folder under the Sencha-charts, I go inside to find, also did not see Sencha-charts.js can be quoted, I think, I have a slot, no JS file, let me directly use folder not. Relying on some of their own experience in the programmer, guess this may be the source code, need to build a JS? So all kinds of find AH find, nonsense not much to say, groped out the solution. is to build this Sencha charts with Sencha's own tool Sencha cmd.
1. First download the latest version of install Sencha cmd.
2. Open the system cmd, enter Sencha, there is a string of information to indicate the successful installation.
3. Then CD to the folder Sencha-charts, run the command:
Sencha Package Build
Note that this package is not Sencha cmd comes with the command, because sencha-charts the original name of the project is the package, if the original is called Hello, you have to change to Sencha hello build. You asked me how I knew it. is to see the Sencha-charts/.sencha folder know, the. Sencha folder has a folder containing Build-impl.xml, then the folder containing the Build-impl.xml file is the original name of the project.
After the above 3 steps, OK, done, will be in the sencha-charts more than a build folder, there are I need to sencha-charts.js.