Sencha Touch chart 时间轴

JSon 时间数据格式

{"data":[{"name":"00:05","sf":"1"},{"name":"00:15","sf":"1"},{"name":"00:25","sf":"1"},{"name":"00:35","sf":"1"},{"name":"00:45","sf":"1"},{"name":"00:55","sf":"1"},{"name":"01:05","sf":"1"},{"name":"01:15","sf":"1"},{"name":"01:25","sf":"1"},{"name":"01:35","sf":"1"},{"name":"01:45","sf":"1"},{"name":"01:55","sf":"1"},{"name":"02:05","sf":"1"},{"name":"02:15","sf":"1"},{"name":"02:25","sf":"1"},{"name":"02:35","sf":"1"},{"name":"02:45","sf":"1"},{"name":"02:55","sf":"1"},{"name":"03:05","sf":"1"},{"name":"03:15","sf":"1"},{"name":"03:25","sf":"1"},{"name":"03:35","sf":"1"},{"name":"03:45","sf":"1"},{"name":"03:55","sf":"1"},{"name":"04:05","sf":"1"},{"name":"04:15","sf":"1"},{"name":"04:25","sf":"1"},{"name":"04:35","sf":"1"},{"name":"04:45","sf":"1"},{"name":"04:55","sf":"1"},{"name":"05:05","sf":"1"},{"name":"05:15","sf":"1"},{"name":"05:25","sf":"1"},{"name":"05:35","sf":"1"},{"name":"05:45","sf":"1"},{"name":"05:55","sf":"1"},{"name":"06:05","sf":"1"},{"name":"06:15","sf":"1"},{"name":"06:25","sf":"1"},{"name":"06:35","sf":"1"},{"name":"06:45","sf":"1"},{"name":"06:55","sf":"1"},{"name":"07:05","sf":"1"},{"name":"07:15","sf":"1"},{"name":"07:25","sf":"1"},{"name":"07:35","sf":"1"},{"name":"07:45","sf":"1"},{"name":"07:55","sf":"1"},{"name":"08:05","sf":"1"},{"name":"08:15","sf":"1"},{"name":"08:25","sf":"1"},{"name":"08:35","sf":"1"},{"name":"08:45","sf":"1"},{"name":"08:55","sf":"1"},{"name":"09:05","sf":"1"},{"name":"09:15","sf":"1"},{"name":"09:25","sf":"1"},{"name":"09:35","sf":"1"},{"name":"09:45","sf":"1"},{"name":"09:55","sf":"1"},{"name":"10:05","sf":"1"},{"name":"10:15","sf":"1"},{"name":"10:25","sf":"1"},{"name":"10:35","sf":"1"},{"name":"10:45","sf":"1"},{"name":"10:55","sf":"1"},{"name":"11:05","sf":"1"},{"name":"11:15","sf":"1"},{"name":"11:25","sf":"1"},{"name":"11:35","sf":"1"},{"name":"11:45","sf":"1"},{"name":"11:55","sf":"1"},{"name":"12:05","sf":"1"},{"name":"12:15","sf":"1"},{"name":"12:25","sf":"1"},{"name":"12:35","sf":"1"},{"name":"12:45","sf":"1"},{"name":"12:55","sf":"1"},{"name":"13:05","sf":"1"},{"name":"13:15","sf":"1"},{"name":"13:25","sf":"1"},{"name":"13:35","sf":"1"},{"name":"13:45","sf":"1"},{"name":"13:55","sf":"1"},{"name":"14:05","sf":"1"},{"name":"14:15","sf":"1"},{"name":"14:25","sf":"1"},{"name":"14:35","sf":"1"},{"name":"14:45","sf":"1"},{"name":"14:55","sf":"1"},{"name":"15:05","sf":"1"},{"name":"15:15","sf":"1"},{"name":"15:25","sf":"1"},{"name":"15:35","sf":"1"},{"name":"15:45","sf":"1"},{"name":"15:55","sf":"1"},{"name":"16:05","sf":"1"},{"name":"16:15","sf":"1"},{"name":"16:25","sf":"1"},{"name":"16:35","sf":"1"},{"name":"16:45","sf":"1"},{"name":"16:55","sf":"1"},{"name":"17:05","sf":"1"},{"name":"17:15","sf":"1"},{"name":"17:25","sf":"1"}]}

var store = Ext.create("Ext.data.Store", {

   		    		   fields:[{name:'name',type:'date',dateFormat:'G:i'},{name:'sf',type:'int'}],
   		    		   data:result.isSucc.data //这是上面的Json
   		    		   });

{

   		    		                                                    xtype:'container',
		    		                                                    layout:'fit', 	
		    		                                                    items:[{ xtype: 'chart', store:store, 
		    		                                                	interactions: [
		    		                                                                                                     {
		    		                             		    		                                           type: 'panzoom',
		    		                             		    		                                           axes: {
		    		                             		    		                                               "left": {
		    		                             		    		                                                   allowPan: false,
		    		                             		    		                                                   allowZoom: false
		    		                             		    		                                               },
		    		                             		    		                                               "bottom": {
		    		                             		    		                                                   allowPan: true,
		    		                             		    		                                                   allowZoom: true
		    		                             		    		                                               }
		    		                             		    		                                           }
		    		                             		    		                                       }
		    		                                                                                 ],

		    		                                                                             series: [
		    		                                                                                  {
		    		                                                                                 type: 'line',
		    		                                                                                 xField: 'name',
		    		                                                                                 yField: 'sf',
		    		                                                                                 style: {
		    		                                                                                     stroke: 'rgb(183,218,90)',
		    		                                                                                     lineWidth: 2
		    		                                                                                 },
		    		                                                                                // title: 'Circle',


		    		                                                                                 highlightCfg: {
		    		                                                                                     scale: 0.7
		    		                                                                                 },

		    		                                                                                 marker: {
		    		                                                                                     type: 'image',
		    		                                                                                     src: 'glyphicons_095_vector_path_circle.png',
		    		                                                                                     width: 46,
		    		                                                                                     height: 46,
		    		                                                                                     x: -23,
		    		                                                                                     y: -23,
		    		                                                                                     scale: 0.5,
		    		                                                                                     fx: {
		    		                                                                                         duration: 200
		    		                                                                                     }
		    		                                                                                 }
		    		                                                                             }],
		    		                                                                         axes: [
		    		                                                                            {
		    		                                                                                type: 'numeric',
		    		                                                                                position: 'left',
		    		                                                                                fields: ['sf'],
		    		                                                                                minimum: -2,
		    		                                                                                maximum: 2,
		    		                                                                            },
        		    		                                                                        {
        		    		                                                                            type: 'time',
        		    		                                                                            dateFormat: 'G:i', //
        		    		                                                                            fields: ['name'],
        		    		                                                                            position: 'bottom',
        		    		                                                                            visibleRange: [0, 0.25],
        		    		                                                                        }
		    		                                                                        ]
		    		                                                            }]
   		    		                                                }