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用于展示和讲 ...
随机推荐
- 玩转SpringCloud（F版本） 二．服务消费者（2）feign
上一篇博客讲解了服务消费者的ribbon+restTemplate模式的搭建,此篇文章将要讲解服务消费者feign模式的搭建,这里是为了普及知识 平时的项目中两种消费模式选择其一即可 本篇博客基于博客 ...
- Eclipse中从svn中检出maven项目
相信很多初学者都遇到过Eclipse中从SVN检出Maven项目之后看到的目录结构并不是Maven目录结构:或者只能先用SVN将Maven项目签入到本地,然后再用Eclipse导入Maven项目,但是 ...
- php7 & lua 压测对比
内存:32G CPU:2个6核 接口数据deflate 压缩后 均不到10k, ==== php7 ==== Concurrency Level: 100 Time taken for tests: ...
- 【斜优DP】bzoj4518-Sdoi2016征途
一.斜率优化DP与决策单调性 这里浅显(并且不严谨)地说明一下标题中的两个名词: 斜率优化DP:状态转移方程形如f[i]=min/max{f[k]+(x[i]-x[k])^y}的一类DP问题: 决策单 ...
- SSH公钥登录原理
在平时工作中我们经常要远程登录服务器,这就要用到SSH协议: $ ssh user@host 主要有两种登录方式:第一种为密码口令登录,第二种为公钥登录 密码口令登录 通过密码进行登录,主要流程为: ...
- CentOS 7解压安装PHP7.1.21
下载php yum install -y wget wget http://cn2.php.net/distributions/php-7.1.21.tar.gz 解压 tar -zxvf php-7 ...
- UNICODE 区域对照表
0000-007F Basic Latin 基本拉丁字母 0080-00FF Latin-1 Supplement 拉丁字母補充-1 0100-017F Latin Extended-A 拉丁字母擴充 ...
- POJ 2546 & ZOJ 1597 Circular Area（求两圆相交的面积 模板）
题目链接: POJ:http://poj.org/problem? id=2546 ZOJ:problemId=597" target="_blank">http: ...
- STM32 USB FS Core and USB OTG Core
STM32 USB-FS-Device development kit Compatible with the STM32F102xx and STM32F103xx series, STM32 L1 ...
- 在 C# 中，如何发现死锁并防止死锁
在解释死锁如何发生以及如何阻止死锁的过程中,你似乎遇到了问题. 当两个( 最小二) 线程试图获取已经被另一个锁锁定的资源的锁时,就会发生死锁. 线程 1锁定资源 1尝试获取对资源 2的锁定. 同时,线 ...