一说到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. RSS介绍、RSS 2.0规范说明和示例代码

    RSS是一种消息来源格式规范,用以发布经常更新资料的网站,例如博客.新闻的网摘.RSS文件,又称做摘要.网摘.更新.频道等,包含了全文或节选文字,再加上一定的属性数据.RSS让发布者自动发布信息,也使 ...

  2. SourceTree 的初次使用的两个小问题

    菜鸟才开始使用SourceTree,出现了两个小问题,特此整理一下,希望对各位新手有帮助.刚开始以为装了SourceTree就不用装git了,其实不然,不装git就会出现下面第一个问题: 1.新手使用 ...

  3. 大数据以及Hadoop相关概念介绍

    一.大数据的基本概念 1.1.什么是大数据 大数据指的就是要处理的数据是TB级别以上的数据.大数据是以TB级别起步的.在计算机当中,存放到硬盘上面的文件都会占用一定的存储空间,例如: 文件占用的存储空 ...

  4. Snmp学习总结系列——开篇

    进入公司以来,一直参与到公司的产品研发工作当中去,在产品研发中有一个监控远程服务器CPU使用率,内存使用情况,硬盘的需求,技术总监提出了使用Snmp协议作为远程监控的技术解决方案,头一次听说Snmp这 ...

  5. Java基础加强总结(三)——代理(Proxy)

    一.代理的概念 动态代理技术是整个java技术中最重要的一个技术,它是学习java框架的基础,不会动态代理技术,那么在学习Spring这些框架时是学不明白的. 动态代理技术就是用来产生一个对象的代理对 ...

  6. Linux驱动开发——指针和错误值

    参考: <Linux设备驱动程序>第三版 P294 许多内部的内核函数返回一个指针值给调用者,而这些函数中很多可能会失败.在大部分情况下,失败是通过返回一个NULL指针值来表示的.这种技巧 ...

  7. Android Socket通信详解

    一.Socket通信简介  Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客 ...

  8. Oracle Applications Documentation

    Oracle E-Business Suite Documentation Web Library Release 12.2+ Link Download Oracle E-Business Suit ...

  9. C#实现缩放字体

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. ibatis.net：第四天，Update 和 Delete

    xml <update id="UpdateOrder" parameterClass="Order"> UPDATE [Orders] SET C ...