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用于展示和讲 ...
随机推荐
- C#简单的通用分页
通用分页技术分析 需要返回不同的类型的数据--采用泛型实现该操作 需要提供不同的方法 上一页 上一页 第一页 最后一页 跳转到指定页 Demo 代码 using System; using Syste ...
- spring RequestMapping 包含http的部分以及各部分详解
@RequestMapping有四个参数,分别为:1.value:表示请求URL2.method:表示请求方法3.params:表示请求参数4.headers:表示请求头 [例如]:@RequestM ...
- 怎样c# java md5值保持一致
c#方式 /// <summary> /// 获得字符串md5. /// </summary> /// <param name="myString"& ...
- BZOJ2655 calc
拉格朗日插值+dp 直接dp是n立方的,我们考虑优化. dp式子为f[i][j]=f[i-1][j-1]*j*i+f[i-1][j]表示i个元素选j个的答案 然后发现最高次就是2j次,所以我们预处理出 ...
- 折腾一天安装Centos7，以及后面恢复Win7引导的曲折历程
一.下载centos 7 livecd iso 访问镜像网站,http://mirrors.aliyun.com/centos/7.0.1406/isos/x86_64/ 或者直接下载:http:// ...
- C++最快的读取文件的方案(scanf,cin(及取消sync),fread)的详细对比
竞赛中,遇到大数据时,往往读文件成了程序运行速度的瓶颈,需要更快的读取方式.相信几乎所有的C++学习者都在cin机器缓慢的速度上栽过跟头,于是从此以后发誓不用cin读数据.还有人说Pascal的rea ...
- hashMap归纳
Hashmap的与hashtable的区别: Hashmap:允许key为空:查询速度快(他是非同步的:避免了同步中不必要的判断):不安全的(容易引 发多线程安全问题) Hashtable:不允许k ...
- authentication unavailable: no polkit agent available to authenticate action 'org.libvirt.unix.manage'的问题解决
这个主要是WebVirtMgr的安装导致出现的错误,解决方法如下: 1.增加libvirtd用户组 groupadd libvirtd 2.设置用户到组 sudo usermod -a -G libv ...
- MikroTik RouterOS安装到SATA硬盘
其实这个问题再5.x以上的版本就已经不存在这个问题,基本现在的版本都支持SATA,如果不支持,估计用的是2.x版本的,那么只需要设置成混合模式(百度)即可.
- SuperPro 3000U 编程器电源部分