彩票走势图

深入解析Kendo UI图表控件(附在线Demo及示例下载)

原创|对比评测|编辑:我只采一朵|2014-04-29 09:52:35.000|阅读 11647 次

概述:近日,Telerik将之前的三大HTML5开发框架Kendo UI Web、Mobile、DataViz重新整合汇总到全新升级的Kendo UI Professional中,这个套包既可以开发Web应用,也可以开发移动应用。另外它还推出了一个免费开源版本:Kendo UI Core。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI Professional下面提供了12款全新升级的UI组件,包括Charts、Gauges、QR Code、Grid、TreeView等等。其中 ChartsGrid 两款组件的功能特性在同类产品中的表现是非常突出的。今天我就为大家详细介绍一下Kendo UI Charts这个控件,并附上在线演示和示例下载。欢迎下载体验!

Kendo UI Charts的功能特点


支持丰富的图表样式

  • Bar/Radar-(条形图/雷达图)用于比较不同的数据集;
  • Pie/Donut chart-(饼图/圆环图)用于查看局部数据在全局中的分布情况;
  • Line/Area(线形/面积图)-用于展示数据走向和趋势;
  • Bullet(子弹图)-比较定量与定性之间的关系;
  • Scatter/Bubble(散点图/气泡图)-用于展现数据间的相关性;
  • Box Plot(箱线图)-以图形方式描述你的统计数据;
  • Funnel(漏斗图)-展现进程阶段;
  • Polar(极线图)-在极坐标中展现数据;
  • Sparklines(波形图)-展现数据走势;
面积图 柱状图 金融图
面积图 柱状图 金融图
气泡图 线形图 圆环图
气泡图 线形图 圆环图
饼图 散点图 仪表
饼图 散点图 仪表图

图表可绑定本地、远程或分组数据

只需要进行一点属性上的设置就可以将Kendo UI图表绑定到最佳的数据源,本地、远程和分组数据源三种方式任你选择。

KendoUI Charts 图表

支持多种数据类型

Kendo UI Charts支持各种数据类型,根据不同的图表类型,图表上可以在X轴上展示各种数据、分类(字符串)或时间点(DateTime)。

KendoUI Charts 图表

客户端渲染大大提升了应用性能

Kendo UI Chart完全由JavaScript渲染,所有它是与服务器平台完全无关的,这样可以大大提升应用程序的性能。默认情况下,chart控件由SVG驱动,支持动画和交互。

可轻松自定义外观

你既可以使用它默认的布局设置,也可以运用它内置的自定义选项去自定义轴、标签、工具条、标题、图例等等,并快速改变对齐和外观。

流畅的图表动画

Kendo UI Chart追求流畅的用户体验。比如,鼠标放在某一个序列名称上时,该序列会高亮显示,以区别于其他数据序列。图表还支持加载动画、交互式工具条等等。

支持多轴和多序列

如果你想更加全面丰富的呈现数据,你可以使用Kendo UI的多轴和多序列功能,你还可以在同一个图表中使用多种图表样式。

MVVM和客户端API进一步扩展灵活性

响应用户操作或处理客户端事件(如触发悬停、点击、拖拽等动作),还可以通过MVVM模式为你的UI和数据使用双向绑定。

内置主题让添加样式更加便捷

你只需要使用一个简单的属性就可以应用现成的主题样式,为你的应用程序建立统一的外观。如果你想添加一些自定义的样式,可以在 markup 中自定义图表元素或使用Kendo UI ThemeBuilder去创建你自己的自定义主题。

多浏览器支持

使用Kendo UI Charts开发的图表应用,可以应用在多种常用的浏览器上,基本上不用担心兼容问题。下面是Kendo UI Professional的三个不同版本所支持的浏览器类型:

桌面浏览器 Kendo UI Web Kendo UI Mobile Kendo UI DataViz
Internet Explorer IE7及以上 IE10及以上 IE7及以上
Google Chrome KendoUI KendoUI
Firefox ESR+  
Safari 5+ (OS X)
Opera 15+
移动浏览器      
iOS 6.0+
Android 2.3+ (default browser)   *
BlackBerry OS 10.0+
Windows Phone 8+
Chrome for Android
  • 勾表示支持
  • * 表示在Android 2.3 中,Kendo UI DataViz只能在Canvas渲染模式下工作

Kendo UI Charts示例下载:

压缩包图标【】 本示例演示如何利用Inkscape将Kendo UI Chart输出为一张PNG图像或一个PDF文件。 另附:

压缩包图标【】本示例演示如何使用分段条形图的total sum将标签放在堆叠图的顶端。

压缩包图标【】本示例演示如何使用Kendo UI分类图的数据轴进行平移和缩放。

慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>


标签:HTML5图表UI界面KendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP