一说到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仪表盘和柱状图 示例的更多相关文章

  1. 工控图表控件ProEssentials创建3D柱状图示例代码

    使用ProEssentials可以创建3D柱状图,柱状图的形式包括线框.实体和阴影. 类似于Graph control,3D柱状图只需要YData. Subsets定义沿z轴有多少行,Points定义 ...

  2. Qwt 折线图 波形图 柱状图示例效果

    Qwt 目录下有不少 example,为了快速找到想要研究使用的例子,特意把所有例子的示例效果截图下来窗口标题即是 example 下的目录名称

  3. [DevExpress]ChartControl之柱状图示例

    关键代码: using System; using System.Data; using System.Windows.Forms; using CSharpUtilHelpV2; using Dev ...

  4. echarts柱状图 渐变色

    效果图:  var xAxisData = []; var data = []; for (var i = 9; i < 16; i++) { xAxisData.push('5月' + i + ...

  5. JFreeChart 之柱状图

    JFreeChart 之柱状图 一.JFreeChart 简介 JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets ...

  6. Echarts 背景渐变柱状图

    var dom = document.getElementById("container"); var myChart1 = echarts.init(dom); var app ...

  7. pyecharts使用

    安装 pyecharts 兼容 Python2 和 Python3.目前版本为 0.1.2 pip install pyecharts 入门 首先开始来绘制你的第一个图表 from pyecharts ...

  8. 数据分析——pyecharts

    导入类库 from pyecharts import Pie, Bar, Gauge, EffectScatter, WordCloud, Map, Grid, Line, Timeline impo ...

  9. Python数据可视化系列-02-pyecharts可视化非常cool

    pyecharts介绍 pyecharts网站 Pyecharts生成的图像,动态效果非常cool.在HTML上展示很是perfect.matplotlib用于科研,但是pyecharts用于展示和讲 ...

随机推荐

  1. Linux设备驱动之USB

    Linux驱动框架分析(一)        事实上,Linux的设备驱动都遵循一个惯例——表征驱动程序(用driver更贴切一些,应该称为驱动器比较好吧)的结构体,结构体里面应该包含了驱动程序所需要的 ...

  2. JZYZOJ 2042 多项式逆元 NTT 多项式

    http://172.20.6.3/Problem_Show.asp?id=2042 题意:求一个次数界为n的多项式在模P并模x^m的意义下的逆元.P=7*17*2^23+1. 多项式逆元的含义以及求 ...

  3. 某题目2 状压DP

    Description 对于一个数列,其混乱度定义为连续相等的数的段数.如:1 2 1 2 1,其混乱度为5,而:1 2 2 3 3,其混乱度为3.现给出一个数列,允许取出k个数并允许插入数列中的任意 ...

  4. Asp.net core中的依赖注入

    使用服务 在Asp.net core的Controller中,可以通过如下两种方式获取系统注入的服务: 构造函数 可以直接在构造函数中传入所依赖的服务,这是非常常见的DI注入方式. public Va ...

  5. TCP套接字端口复用SO_REUSEADDR

    下面建立的套接字都是tcp套接字 1.进程创建监听套接字socket1,邦定一个指定端口,并接受了若干连接.那么进程创建另外一个套接口socket2,并试图邦定同一个端口时候,bind错误返回“Add ...

  6. Entity framework 增加默认执行时间

    public partial class ProductionSupportEntities : DbContext { public ProductionSupportEntities() : ba ...

  7. ASP.NET Web API实践系列05,消息处理管道

    ASP.NET Web API的消息处理管道可以理解为请求到达Controller之前.Controller返回响应之后的处理机制.之所以需要了解消息处理管道,是因为我们可以借助它来实现对请求和响应的 ...

  8. Java异常(三) 《Java Puzzles》中关于异常的几个谜题

    概要 本章介绍<Java Puzzles>中关于异常的几个谜题.这一章都是以代码为例,相比上一章看起来更有意思.内容包括:谜题1: 优柔寡断谜题2: 极端不可思议谜题3: 不受欢迎的宾客谜 ...

  9. 【linux】linux下shell命令 多个变量在命令中的引用 以及重新赋值给新的变量

    原本的find命令: find /apps/Devops/jenkins/workspace/swapping/target/ -name '*swapping*.jar' 错误的命令: SOURCE ...

  10. input输入框只能输入正整数正则

    input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="i ...