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: ...
随机推荐
- 怎样配置nginx同一时候执行不同版本号的php-fpm
在/usr/local/php/etc/php-fpm.conf里找到 listen = 127.0.0.1:9000 将port9000改动为9001 在对应的nginx配置里也做相同的port改动
- HDU 1420 Prepared for New Acmer【中国剩余定理】
/* 解决问题的思路:中国剩余定理,还要注意的是数据的类型,要使用__int64位 解决人:lingnichong 解决时间:2014-08-30 06:56:35 :简单题 */ Prepared ...
- Scripting Java #3：Groovy与invokedynamic
只需看看今天Groovy语言实现机制.在此之前,是第一个推倒静态类型与动态类型语言在实现上面的一些差异. 静态类型 vs. 动态类型 看以下这个简单的栗子. def addtwo(a, b) { re ...
- Windows 7下一个：该应用程序不能正常启动(0xc0150002)
在新系统中正确安装QQ2010无法执行,同一时候安装的TM2009也无法执行. 相同显示为"应用程序无法正常启动(0xc0150002). 请单击"确定" ...
- Codeforces 484E Sign on Fence(是持久的段树+二分法)
题目链接:Codeforces 484E Sign on Fence 题目大意:给定给一个序列,每一个位置有一个值,表示高度,如今有若干查询,每次查询l,r,w,表示在区间l,r中, 连续最长长度大于 ...
- xshell联系CentOS6.5 iptables要么ls 乱码输出
今天Xshell 联系CentOS6.5.当终端>编码设置为:Unicode(UTF-8)时刻,跑service iptables restart输出是乱码命令:当编码被设置为:当默认语言.ls ...
- BP神经网络的基本原理
2.1 BP神经网络基本原理 BP网络模型处理信息的基本原理是:输入信号Xi通过中间节点(隐层点)作用于输出节点.经过非线形变换,产生输出信号Yk,网络训练的每一个样本包含输入向量X和期望输出量t,网 ...
- 认识Backbone (三)
Backbone.Collection(集合) collection是model对象的一个有序的组合,我们可以在集合上绑定 "change" 事件,从而当集合中的模型发生变化时f ...
- FTP上传文件时 System.Net.WebException: 基础连接已经关闭: 接收时发生错误。
在c#中使用HttpWebRequest时,频繁请求一个网址时,过段时间就会出现“基础连接已经关闭: 接收时发生意外错误”的错误提示.将webRequest的属性设置成下面的,经测试可以解决.Syst ...
- Win7设置局域网共享
Win7设置局域网共享 1． 把win7的guest用户开启. 打开win7的控制面板=>用户账号与安全=>用户账户=>管理其他用户=>点击guest用户,进行开启. 2.解决 ...