`
sailei1
  • 浏览: 127024 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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],
        		    		                                                                        }
		    		                                                                        ]
		    		                                                            }]
   		    		                                                }
0
2
分享到:
评论

相关推荐

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    Sencha Touch 是一款专为移动设备开发的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用。这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于...

    Sencha 和 Sencha Touch 简介

    本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...

    sencha touch2 ajax 获取数据

    在探讨“Sencha Touch2 AJAX获取数据”的主题时,我们首先需要理解Sencha Touch2框架的基本概念以及AJAX技术在其中的应用。Sencha Touch2是一个用于构建高性能、跨平台的移动应用的JavaScript库,它专注于触摸设备上...

    Sencha Touch in Action

    《Sencha Touch in Action》是一本关于使用Sencha Touch进行跨平台移动开发的书籍,它详细介绍了Sencha Touch框架的使用方法和技巧。Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架,它是...

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...

    sencha touch项目源码

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。这个项目源码是基于Sencha Touch开发的一个实例,通过研究这个项目,我们可以深入理解Sencha ...

    Sencha Touch开发的项目《般若人生》源码

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...

    一个完整的sencha touch 应用案例

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素,让我们逐一解析这些...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...

    Sencha Touch2环境搭建

    Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...

    sencha touch中文翻译文档

    Sencha Touch是一款强大的JavaScript框架,专门用于构建移动Web应用程序。它提供了一套完整的UI组件和交互功能,使得开发者能够创建出具有原生应用体验的触摸友好型应用。这个"Sencha Touch中文翻译文档"是针对...

    api.zip_sencha _sencha touch api_sencha touch2 api

    标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合,可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...

    Sencha Touch2 MVC Demo (含源码/数据库)

    Sencha Touch 2 是一个流行的JavaScript框架,专为构建移动Web应用程序而设计。它提供了丰富的UI组件、数据管理和触摸事件处理,使得开发者可以创建与原生应用类似的交互体验。MVC(Model-View-Controller)架构模式...

    Sencha Touch MVC 模式

    **Sencha Touch MVC模式详解** Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件和强大的数据管理功能,使得开发响应式的、交互性强的移动应用变得容易。在Sencha Touch中,MVC(Model-...

Global site tag (gtag.js) - Google Analytics