首页 > 其他分享 >Ext JS 4倒计时:图形和图表

Ext JS 4倒计时:图形和图表

时间:2023-05-21 14:01:40浏览次数:66  
标签:图表 draw 演示 JS 倒计时 Ext 图像


      基本图形功能

      一直以来,在Web应用程序中进行绘图是很困难的事情。虽然我们很希望在应用程序中创建丰富的交互式图表或其他图像,但是HTML真的是不是这块料。通常,我们需要使用到Adobe Flash,但这给我们带来了两个难题:我们习惯书写Javascript代码,而且Flash并不是所有设备都支持。解决这个问题的方法就是使用一个纯Javascript的图形库,通过它创建丰富的图形和图表。它可以运行在ie6到iOS等任何平台,而且它已经成为Sencha Touch的附件。

      在Ext JS 4中,一个崭新的强大的Ext.draw类,不单使不同绘图引擎的绘图标准化,而且提供了简单统一的绘图API。Ext.draw将使用SVG或VML作为绘图方式,并自动根据不同浏览器使用最佳的绘图方式。一切都是基于矢量的,这意味着你可以将图形放大到任何级别,图形看起来依然清晰。(我们还计划在Ext 4.x版本中加入Canvas支持。)

      让我们来看一些演示。第一个我想演示的是使用Ext.draw创建的可调整大小的Sencha Touch Logo 。尝试放大Logo的,可以看到,尽管logo放大了,使用Ext.draw组件创建的logo仍然清晰。使用Ext.draw绘出logo很简单,它使用SVG接口,Ext.Draw知道如何使用它。任何可以使用SVG接口渲染的图形都可以使用Ext.draw进行渲染,甚至老虎:在这个例子 中,你可以在屏幕中拖动老虎,并尝试放大看看细节表现。这适用于任何浏览器。

      最后一个例子 是演示使用Ext.draw在所有浏览器中旋转文本。我们是否已经迷上了这些简单易用的例子?Ext.draw的确很棒,不过它只是开胃菜,主菜是Ext.chart。

      令人难以置信的图表

      由Ext.draw提供的新的图表功能是Ext JS 4中最令人兴奋的部分之一。我们的使命很明确,就是创造世界上最后的Javascript图表库。我们认为我们已经做到这一点。今天我们将有16个演示 与大家分享。请记住,这是测试版,但我们希望你会喜欢你所看到的。请注意,你在我们的演示网页上看到的的16个演示只是很少的一部分。

      我们要介绍的前两个图表你可以想到是线图和柱状图。我们有很多这样的演示,但这次让我们从全新的东西开始演示:面积图。下面是一个由一些随机数据做的简单的演示。尝试单击“Reload”按钮,你将看到图表的变化。单击数据标题可以显示或隐藏每个系列的数据。

 

      Ext.chart已集成到新的数据包,从而使你的数据图表显示非常容易。当然,该图表是完全动态的。在下面的例子,随机数据会每隔2秒就添加到store图表将会滚动,当图线到达右侧的时候横轴将更新。

      另一个新的图表是雷达图,它又分成填充图和非填充图两种。再次提醒,它很容易和你的数据关联,而且是动态的。

      我们也有很多传统的图表:线图、条形图、柱形图、饼图、散列图,或者由它们混合而成的图。

      这些图表功能完成集成在Ext JS 4里,不过这不是唯一可以看到它们的地方。你也可以在Sencha Touch的附件里找到它们。我要告诉你们的是,你也可以在还没将你的应用程序升级到Ext JS 4.x的时候使用这些图表。因为Ext Js 4使用全新的沙盒,所以你可以在同一页面中同时运行Ext JS 4和之前版本Ext Js,这意味着你不用升级你的Ext Js 3应用程序,就可以立竿见影的在应用程序中使用新的图表功能(当你获得了4.0的许可证)。

      主题和定制

      Ext JS 4最关键的一个要求就是能够极其简单的定制主题。这同样适用于绘图和图表,因为它们是简单的HTML基础元素。因此,我们尽我们所能着手创建可定制的图表库。几乎每个图表的每一个方面都可以通过一组CSS样式对微小的细节进行调整。改变颜色、字体和阴影是很容易的,而且图表渲染后仍然可以做修改。所有图表的外观和表现都可以很方便的被定义成图表主题,应用在你的应用程序中。我们将在另一篇博文中探讨这个问题。

      不单外观可以被定制,图像图表的行为也是可以被定制的。由于所有于绘制的图像都是一个Ext JS对象,因而很容易在图像中添加鼠标单击或停留等互动行为。如果你需要创建不包含在框架中的图像,你可以创建一个基于Ext.draw包的图像类,定制你需要图像。

      试用演示

      所有19个图像图像演示 你可以在线测试,也可以在这里下载

      今天,我们介绍了新的Ext JS图像图表包。我们迫不及待的将这些演示送到你们的手上并让你们看看它们是如何实现的。如果你想了解更多关于Ext JS 4关于图像图表的功能,我建议你们参加Sencha大会。

原文:http://www.sencha.com/blog/ext-js-4-preview-drawing-and-charting/

标签:图表,draw,演示,JS,倒计时,Ext,图像
From: https://blog.51cto.com/dqhuang/6319239

相关文章

  • Ext JS 4倒计时:开发者预览版
         作为ExtJS团队的代表,我很高兴地宣布第一个ExtJS4开发者预览版发布了。ExtJS4是到目前为止,我们所做的改动最大,有史以来最先进的Javascript框架。从生成HTML代码到类系统,框架的每一个领域几乎都被更新了。我们统一了Api,添加了令人难以置信的新功能和改进了整个框架......
  • CesiumJS 源码杂谈 - 时间与时钟系统
    目录1.时间的“诞生”2.时间的推进3.EntityAPI与PropertyAPI的更新动力源4.简单应用4.1.使用原生JSDate对象创建JulianDate4.2.使用时间字符串(ISO8601标准的时间字符串或UTC时间字符串)创建JulianDate4.3.为时钟设置起止时间和速率4.4.调整时钟的循环情况你......
  • 折线图highcharts.js -纯js图表库
    查看演示功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库ps:使用highcharts怎么去掉图表上那个官网标识链接credits:{enabled:false}......
  • nodejs多线程,真正的非阻塞
    干货:收藏:http://cnodejs.org/topic/518b679763e9f8a5424406e9node从他推出至今,充满赞美和饱受诟病的都是其单线程模型,所有的任务都在一个线程中完成(I/O等例外),优势的地方自然是免去了频繁切换线程的开销,以及减少资源互抢的问题等等,但是当nodejs面对cpu密集型模型的时候就力不从心了......
  • [nodejs]国内npm安装nodejs modules失败的几个解决方案
    使用npm安装node模块时经常有卡住安装失败的情况,如图所示。原因在于npm服务器在美国,还有就是某强大的防火墙作用。这样的问题导致很多新手放弃使用node,几乎每天都有新手再问这个问题。现在分享一下解决这个问题的解决方案1.可以通过一劳永逸的方式修改代理地址2.更换npm源拼rp (......
  • 利用卷积神经网络的Text-CNN 文本分类
    访问【WRITE-BUG数字空间】_[内附完整源码和文档]TextCNN是利用卷积神经网络对文本进行分类的算法,由YoonKim在“ConvolutionalNeuralNetworksforSentenceClassification”一文(见参考[1])中提出.TextCNN是利用卷积神经网络对文本进行分类的算法,由YoonKim在“Conv......
  • js number format All In One
    jsnumberformatAllInOne金融数据表示法千分位符号//1,000,000demos(......
  • Newtonsoft.Json使用
    目录枚举类型序列化/反序列化结论序列化后的字符串字段顺序控制通过[JsonProperty(Order=1)]控制字段序列化后的顺序通过自定义ContractResolver的方式实现相关参考用于记录开发过程中Newtonsoft.Json中使用的常用功能。枚举类型序列化/反序列化由于枚举类型的基类是值类型,......
  • org.apache.jasper.JasperException: /pages/role-list.jsp (行.: [145], 列: [8]) 根
    org.apache.jasper.JasperException:/pages/role-list.jsp(行.:[145],列:[8])根据标记文件中的TLD或attribute指令,attribute[items]不接受任何表达式 web.xml中版本号不兼容产生的问题;解决方法:<%@taglibprefix=“c”uri=“http://java.sun.com/jstl/core”%>改为<%@t......
  • 12-JSP
    1,JSP概述JSP(全称:JavaServerPages):Java服务端页面。是一种动态的网页技术,其中既可以定义HTML、JS、CSS等静态内容,还可以定义Java代码的动态内容,也就是JSP=HTML+Java。如下就是jsp代码<html><head><title>Title</title></head><body>......