一说到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. zookeeper 节点启动时的更新机制

    使用zk的应用节点和zk数据本身的同步,当系统启动时使用zk配置的信息和zk本身存储不一致, 此时应存在一个更新机制将应用配置数据和zk数据更新一致. 启动时更新拉取zk配置中心的更新本地数据,以zk ...

  2. P4810 A’s problem(a)

    P4810 A’s problem(a)From: admin 时间: 1000ms / 空间: 65536KiB / Java类名: Main 背景 清北NOIP春季系列课程 描述 这是一道有背景的 ...

  3. 【11.1校内测试】【快速幂DP】【带权并查集】【模拟】

    Solution $jzy$大佬用了给的原根的信息,加上矩阵快速幂150行QAQ 然而$yuli$大佬的做法不仅好懂,代码只有50行! 快速幂的思想,把m看成要组成的区间总长度,每次将两段组合得到新的 ...

  4. Lvs+Keepalived+Mysql

    环境 [root@node1 ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@node1 ~]# uname -a Linu ...

  5. Codeforces Round #369 (Div. 2) E. ZS and The Birthday Paradox 数学

    E. ZS and The Birthday Paradox 题目连接: http://www.codeforces.com/contest/711/problem/E Description ZS ...

  6. C# 读带复选框的excel，写excel并设置字体、边框、背景色

    这是一篇excel读写功能大汇总,通过C#调用Microsoft.Office.Interop.Excel.dll才能完成任何复杂格式excel的读写操作. 本文需要读取的excel格式如下: 可见表 ...

  7. delphi GetKeyState

    GetKeyState(VK_CAPITAL) & 0x0001 0x8000 是键有否按下0x0001 是键的翻转状态 var bF1Down: Boolean;begin bF1Down ...

  8. WebLogic使用总结(二)——WebLogic卸载

    一.WebLogic 12c的卸载 WebLogic的卸载是非常容易的,找到WebLogic的卸载程序,如下图所示: 启动卸载程序,如下图所示:

  9. Docker 传奇之 dotCloud

    2010年,几个大胡子年轻人在旧金山成立了一家做 PaaS 平台的公司,起名为「dotCloud」,这个名字让我想起了微软的「DotNet」. dotCloud 主要是基于 PaaS 平台为开发者或开 ...

  10. Java/JSP获得客户端网卡MAC地址的三种方法解析

    java/jsp获得客户端(IE)网卡MAC地址的方法大概有三种. 1.通过命令方式,在客户端执行Ipconfig 等等.(java/jsp) 2.通过ActiveX的方法.(jsp) 3.通过向13 ...