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用于展示和讲 ...
随机推荐
- ApiPost自动化测试基础之：如何使用测试校验（测试用例）？
我们在<ApiPost的环境变量的定义和使用>和<ApiPost自动化测试基础之:接口参数依赖的情景处理>分别讲解了ApiPost环境变量的定义.使用以及基于环境变量的接口参数 ...
- [ 转载 ] Java 构造代码块
https://blog.csdn.net/liyunxiangrxm/article/details/80244016
- Ubuntu 安装Chrome
apt方式安装Chrome 1.添加密匙 wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key a ...
- 优美的爆搜?KDtree学习
如果给你平面内一些点,让你求距离某一个指定点最近的点,应该怎么办呢? O(n)遍历! 但是,在遍历的过程中,我们发现有一些点是永远无法更新答案的. 如果我们把这些点按照一定顺序整理起来,省略对不必要点 ...
- BZOJ.3698.XWW的难题(有源汇上下界最大流ISAP)
题目链接 按套路行列作为两部分,连边 \(S->row->column->T\). S向代表行的元素连边cap(A[i][n])(容量上下界为上下取整),代表列的元素向T连边cap( ...
- hdu 4452 37届金华赛区 K题
题意:给一个n*n的格子,1在左上角,2在右下角,每个人有一个初始速度和方向,若遇到边缘,则朝相反方向前进,若两个人相遇则交换方向(注意方向改变后,人仍然需要移动),同时,每个人每过t1,t2时间就会 ...
- ios优秀的第三方框架
1.数据请求,object-c AFNetworking 网址:https://github.com/AFNetworking/AFNetworking swift Alamofire 网址:h ...
- 如何用万用表判断一个12V蓄电池是否没电
常用的方法如下: 1.找一根细铜丝,接触电瓶的正负极柱,冒火花说明电瓶有电,不冒火花说明没有电. 2.用万用表测量电瓶的电压,12.7V说明满电,11.50V一下说明没有电. 3.找一个12V的灯泡或 ...
- 在Asp.net core中使用WebScocket
今天小试了一下在Asp.net core中使用websocket,这里记录一下: 在 Startup 类的 Configure 方法中添加 WebSocket 中间件. app.UseWebSocke ...
- golang-bcc-bpf-function-tracing
http://www.brendangregg.com/blog/2017-01-31/golang-bcc-bpf-function-tracing.html