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: ,
to: ,
color: "#F97172"
}, {
from: ,
to: ,
color: "#FADE71"
}, {
from: ,
to: ,
color: "#67DF65"
}]; $(".js-gauge").kendoRadialGauge({
theme: 'metro',
pointer: {
value: ,
cap: {
size: 0.1,
color: "black"
}
},
scale: {
minorUnit: ,
majorTicks: {
size:
},
startAngle: -,
endAngle: ,
max: ,
labels: {
visible: true,
position: "inside",
},
rangeSize: ,
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: -
},
axisCrossingValues: [, ]
},
tooltip: {
}
});
</script>
</body>
</html>
相关代码下载http://download.csdn.net/detail/dz45693/7647501
kendoui仪表盘和柱状图 示例的更多相关文章
- 工控图表控件ProEssentials创建3D柱状图示例代码
使用ProEssentials可以创建3D柱状图,柱状图的形式包括线框.实体和阴影. 类似于Graph control,3D柱状图只需要YData. Subsets定义沿z轴有多少行,Points定义 ...
- Qwt 折线图 波形图 柱状图示例效果
Qwt 目录下有不少 example,为了快速找到想要研究使用的例子,特意把所有例子的示例效果截图下来窗口标题即是 example 下的目录名称
- [DevExpress]ChartControl之柱状图示例
关键代码: using System; using System.Data; using System.Windows.Forms; using CSharpUtilHelpV2; using Dev ...
- echarts柱状图 渐变色
效果图: var xAxisData = []; var data = []; for (var i = 9; i < 16; i++) { xAxisData.push('5月' + i + ...
- JFreeChart 之柱状图
JFreeChart 之柱状图 一.JFreeChart 简介 JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets ...
- Echarts 背景渐变柱状图
var dom = document.getElementById("container"); var myChart1 = echarts.init(dom); var app ...
- pyecharts使用
安装 pyecharts 兼容 Python2 和 Python3.目前版本为 0.1.2 pip install pyecharts 入门 首先开始来绘制你的第一个图表 from pyecharts ...
- 数据分析——pyecharts
导入类库 from pyecharts import Pie, Bar, Gauge, EffectScatter, WordCloud, Map, Grid, Line, Timeline impo ...
- Python数据可视化系列-02-pyecharts可视化非常cool
pyecharts介绍 pyecharts网站 Pyecharts生成的图像,动态效果非常cool.在HTML上展示很是perfect.matplotlib用于科研,但是pyecharts用于展示和讲 ...
随机推荐
- 初识thinkphp(4)
这次内容是数据库的使用方法 因为在第一章讲过就是拿index这个文件写的数据库的访问,这次实验我使用文件是系统默认的首页 配置的内容也在那里有提过就不重发戳图了. 数据库按照手册上的建议建了3行的内容 ...
- django-模板初探
一般而言,我们在视图函数中处理各种业务逻辑之后,应该返回一个 HttpResponse 对象.而 HttpResponse 对象的第一个参数接受字符串或者是迭代器,作为响应报文的主体.但是这意味着我们 ...
- SDOI2013 R1 Day1
目录 2018.3.22 Test 总结 T1 BZOJ.3122.[SDOI2013]随机数生成器(BSGS 等比数列) T2 BZOJ.3123.[SDOI2013]森林(主席树 启发式合并) T ...
- NOIP练习赛题目5
小象涂色 难度级别:C: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 小象喜欢为箱子涂色.小象现在有c种颜色,编号为0~c-1:还有n个箱 ...
- 分位函数（四分位数）概念与pandas中的quantile函数
p分位函数(四分位数)概念与pandas中的quantile函数 函数原型 DataFrame.quantile(q=0.5, axis=0, numeric_only=True, interpola ...
- 如何使用PhoneGap打包Web App
最近做了一款小游戏,定位是移动端访问,思来想去最后选择了jQuery mobile最为框架,制作差不多以后,是否可以打包成App,恰好以前对PhoneGap有耳闻,便想用这个来做打包,可以其中艰辛曲折 ...
- BZOJ2217 : [Poi2011]Lollipop
若能得到一个和为t的区间,那么至少去掉两端点中任意一个后必定能得到和为t-2的区间. 所以只需要分别找到和最大的和为奇数和偶数的区间,然后$O(n)$完成构造即可. #include<cstdi ...
- Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem C. Cargo Transportation 暴力
Problem C. Cargo Transportation 题目连接: http://opentrains.snarknews.info/~ejudge/team.cgi?SID=c75360ed ...
- 异步接收MSMQ消息
在这部分,我们将使用ThreadPool 和MSMQ 进行消息收发.MSMQ 是一个分布式队列,通过MSMQ 一个应用程序可以异步地与另外一个应用程序通信. 在一个典型的场景中,我们要向维护一个队列的 ...
- hdu Encoding
Encoding Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Subm ...