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>

View Code

相关代码下载http://download.csdn.net/detail/dz45693/7647501

kendoui仪表盘和柱状图示例相关推荐

echarts仪表盘，柱状图，折线图，趋势图
系列文章目录文章目录系列文章目录前言一.仪表盘二.柱状图三.折线图四.趋势图前言 //解决页面刷新canvas画布变大async loadEcharts(id) {var myChar ...
R 语言柱状图示例笔记
由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文章中链接. 一.基础柱状图 1. barplot 命令基于barplot基础柱状图颜色.方向及分组的绘 ...
python 仪表盘 ppt_Python强大的pyecharts绘画优美图形lt;三gt;
绘制图形: 仪表盘 - 漏斗图 - 关系图 - 水球 - 极坐标 - 雷达from pyecharts import Funnel, Gauge, Graph attr =["衬衫" ...
Matplotlib常见图形绘制（折线图、散点图、柱状图、直方图、饼图）
Matplotlib能够绘制折线图.散点图.柱状图.直方图.饼图. 我们需要知道不同的统计图的意义,以此来决定选择哪种统计图来呈现我们的数据. 1 常见图形种类及意义折线图:以折线的上升或下降来表示 ...
D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
Python 数据分析三剑客之 Matplotlib（六）：直方图 / 柱状图 / 条形图的绘制
CSDN 课程推荐:<Python 数据分析与挖掘>,讲师刘顺祥,浙江工商大学统计学硕士,数据分析师,曾担任唯品会大数据部担任数据分析师一职,负责支付环节的数据分析业务.曾与联想.亨氏.网 ...
实战PyQt5: 143-QChart图表之堆积柱状图
堆积柱状图将数据按组显示为彼此堆积的柱状图.堆积按类别进行.堆积柱状图将数据按组显示为柱状的条,并相互堆积.堆积按类别进行.创建堆积柱状图就像创建常规的柱状图相似,在QChart中使用QStacked ...
MATLAB | 面积图、饼状图、水平柱状图的斜线填充(阴影填充)
没想到叭,阴影柱状图仅仅一天就迎来了(1.5.1)版本,已经支持水平柱状图绘制!!同时本人又连夜赶制了另外两款相关的阴影图绘制函数: 来来来,后文马上介绍一下这三款函数. 另:代码开发基于polysh ...
简单介绍Vue使用echarts定制特殊的仪表盘
这篇文章主要为大家详细介绍了Vue使用echarts定制特殊的仪表盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue使用echarts定制特殊 ...

kendoui仪表盘和柱状图示例

kendoui仪表盘和柱状图示例相关推荐

最新文章

热门文章

kendoui仪表盘和柱状图 示例

kendoui仪表盘和柱状图 示例相关推荐

最新文章

热门文章

kendoui仪表盘和柱状图示例

kendoui仪表盘和柱状图示例相关推荐