kendoui仪表板和直方图 演示样本
到那个时刻kendeodui我相信大家一定不陌生。该js在绘画方面的好成绩。
现在来看看 它的仪表盘和直方图效果：
html和js代码例如以下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>kendoui DEmo</title>
<link type="text/css" rel="stylesheet" href="kendoui/styles/kendo.common.min.css" />
<link type="text/css" rel="stylesheet" href="kendoui/styles/kendo.dataviz.metro.min.css" /> <script type="text/javascript" src="kendoui/js/jquery.min.js"></script>
<script type="text/javascript" src="kendoui/js/kendo.all.min.js"></script> </head>
<body>
<div> <div class="js-gauge" style=" width:250px; height:200px"></div>
<div class="js-chart" style=" width:750px; height:600px"></div>
</div>
<script type="text/javascript">
var ranges = [{
from: 0,
to: 30,
color: "#F97172"
}, {
from: 30,
to: 60,
color: "#FADE71"
}, {
from: 60,
to: 100,
color: "#67DF65"
}]; $(".js-gauge").kendoRadialGauge({
theme: 'metro',
pointer: {
value: 50,
cap: {
size: 0.1,
color: "black"
}
},
scale: {
minorUnit: 20,
majorTicks: {
size: 3
},
startAngle: -10,
endAngle: 190,
max: 100,
labels: {
visible: true,
position: "inside",
},
rangeSize: 10,
ranges: ranges
}
}); $(".js-chart").kendoChart({
theme: 'metro',
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Accomplishment",
color: "#67DF65",
axis: "number",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
tooltip: {
visible: true,
format: "{0:p1}",
template: "#= series.name #: #= kendo.toString(value,'n2') #"
}
}, {
type: "line",
color: "#B565DF",
axis: "percent",
name: "Validated Pipeline Coverage Ratio",
data: [0.988, 0.733, 0.994, 0.464, 0.52, 0.939, 0.333, 0.245, 0.339, 0.727],
tooltip: {
visible: true,
format: "{0:p1}",
template: "#= series.name #: #= kendo.toString(value,'p2') #"
}
}],
valueAxis: [{
name: 'number',
labels: {
format: "{0:n1}"
},
line: {
visible: false
}
}, {
name: 'percent',
labels: {
format: "{0:p1}"
},
line: {
visible: false
}
}],
categoryAxis: {
categories: ['Papua New Guinea Rep Office', 'Papua New Guinea Rep Office', 'Papua New Guinea Rep Office', 'Papua New Guinea Rep Office', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio', 'Validated Pipeline Coverage Ratio'],
line: {
visible: true
},
labels: {
rotation: -75
},
axisCrossingValues: [0, 10]
},
tooltip: {
}
});
</script>
</body>
</html>
相关代码下载相关代码下载http://download.csdn.net/detail/dz45693/7647501
版权声明：本文博客原创文章，博客，未经同意，不得转载。
kendoui仪表板和直方图 演示样本的更多相关文章
- 模式识别 - 处理多个演示样本研究(MIL)特点(matlab)
处理多个演示样本研究(MIL)特点(matlab) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27206325 多演示样例学习 ...
- Cocos2d-x 3.2 Lua演示样本CocosDenshionTest（音频测试）
Cocos2d-x 3.2 Lua演示样本CocosDenshionTest(音频测试) 本篇博客介绍Cocos2d-x 3.2中Lua演示样例的音频測试.Cocos2d-x使用SimpleAudi ...
- java注意事项演示 地图产生表 演示样本 来自thinking in java 4 20代码的章
java注意事项演示 地图产生表 演示样本 来自thinking in java 4 20代码的章 thinking in java 4免费下载:http://download.csdn.net/d ...
- Cocos2d-x 3.2 Lua演示样本 ActionTest（操作测试）
Cocos2d-x 3.2 Lua演示样本 ActionTest(操作测试) 2014年博文大赛,请投上您宝贵的一票:http://vote.blog.csdn.net/Article/Details ...
- Asp.net固定功能位充满了零（解决，演示样本）！
Asp.net固定功能位充满了零(解决.演示样本)! 在发展,其中,数实现出现8数字.但是,需要使用0加厚.例如:123,代表:0000123. 真实的比例,如下: decimal aaa = 123 ...
- WebGL自学教程——WebGL演示样本：开始
最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的 ...
- MVC模式编程演示样本-登录认证（静态）
好,部分博客分享我的总结JSP-Servlet-JavaBean思想认识和三层编程模型的基本流程,ZH- CNMVC该示例实现演示的编程模式-登录身份验证过程,在这里,我仍在使用静态验证usernam ...
- Java8的日期和时间的库20经常使用的演示样本
除了lambda表达,stream以及从一些小的改进,Java 8还推出了新的日期和时间API,在本教程中,我们将展示通过几个简单的任务来学习如何使用示例Java 8这组API.Java至今.日历和时 ...
- HTML 5 在Web SQL 使用演示样本
Web sql 这是一个模拟数据库浏览器.可以使用JS操作SQL完成数据读取和写入,但是这件事情并不多,现在支持的浏览器,而其W3C规格已经停止支持.外形似它的前景不是很亮. W3C 规范:http: ...
随机推荐
- 编写高效的JavaScript
Web前端性能优化——编写高效的JavaScript 前言 随着计算机的发展,Web富应用时代的到来,Web 2.0早已不再是用div+css高质量还原设计的时代.自Gmail网页版邮件服务的问世 ...
- 【iOS开发-22】navigationBar导航栏，navigationItem建立：获取导航栏中的基本文本和button以及各种跳跃
(1)navigationBar导航栏可以被看作是self.navigationController一个属性导航控制器,它可以由点直接表示self.navigationController.navig ...
- MIT 操作系统实验 MIT JOS lab2
MIT JOS lab2 首先把内存分布理清楚,由/boot/main.c可知这里把kernel的img的ELF header读入到物理地址0x10000处 这里能够回想JOS lab1的一个小问.当 ...
- 如何自动以管理员身份运行.NET程序？
原文:如何自动以管理员身份运行.NET程序? windows 7和vista提高的系统的安全性,同时需要明确指定“以管理员身份运行”才可赋予被运行软件比较高级的权限,比如访问注册表等.否则,当以普通身 ...
- C# Windows Phone App 开发，修改【锁定画面】，从【Assets】、【UI】、【网路图片】，并解决失灵问题。
原文:C# Windows Phone App 开发,修改[锁定画面],从[Assets].[UI].[网路图片],并解决失灵问题. 一般我们在开发Windows Phone App,有时会希望透过应 ...
- 查看linux信息
1.操作系统内核 cat /proc/version 2.操作系统版本 head -n 1 /etc/issue # 查看操作系统版本 3.查看cpu信息 more /proc/cpuinfo --- ...
- VMware装ubuntu 进不去图形界面， 卡在Installing VMware Tools
1.按Ctrl +C结束,进入命令行 2.ubuntu login:_ 依次输入: 1)你的用户名:输入自己的! 2)你的密码:输入自己的! 3)获取root权限:sudo su 输密码 4)/etc ...
- Hadoop读书笔记（二）HDFS的shell操作
Hadoop读书笔记(一)Hadoop介绍:http://blog.csdn.net/caicongyang/article/details/39898629 1.shell操作 1.1全部的HDFS ...
- air mobile andriod ios 页面加载控件
通过最近的研究flex 书写android .ios申请书,我们遇到了一个问题加载页面,我们用flex sdk 12,air 15 无级似android ListView寻呼模块.所以,我和我的同事们 ...
- 构造NFS
一.设备nfs-utils 伺服器: [root@server05 ftp]# yum install nfs-utils 这时会自己主动安装rpcbind需将此服务重新启动nfs服务才干启动 cli ...