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

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

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

相关链接:

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

Kendo UI Charts的功能特点


支持丰富的图表样式

在线Demo

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

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

在线Demo

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

KendoUI Charts 图表

支持多种数据类型

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

KendoUI Charts 图表

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

在线Demo

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

可轻松自定义外观

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

流畅的图表动画

在线Demo

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

支持多轴和多序列

在线Demo

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

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

在线Demo

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

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

在线Demo

你只需要使用一个简单的属性就可以应用现成的主题样式,为你的应用程序建立统一的外观。如果你想添加一些自定义的样式,可以在 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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:HTML5图表UI界面KendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat