一说到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-C基础编程

    GCC工作流程 工作流程 1.预处理 -E xxx.c —> xxx.i 宏替换:头文件展开:注释去掉: gcc -E hello.c -o hello.i 2.编译 -S xxx.i —> ...

  2. Android-Toolbar相关

    Android-Toolbar相关 学习自 <Android第一行代码> https://www.jianshu.com/p/79604c3ddcae https://www.jiansh ...

  3. Django如何重设Admin密码

    如果你忘记了Admin的密码的话,就要用Django shell: python manage.py shell 然后获取你的用户名,并且重设密码: >>>from django.c ...

  4. handlebars.min.js的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [POJ1655]Balancing Act

    思路:DP求树的重心.对于每个结点$i$,$d_i=\displaystyle{\sum_{j\in s(i)}}d_j+1$.删去这个点能得到的最大子树大小即为$\max(\max\limits_{ ...

  6. oracle切割以，隔开的数字字符串

    提前声明strsplit_typeCREATE OR REPLACE TYPE strsplit_type as table of varchar2(4000); 如果不,会报错:PLS-00201: ...

  7. 关于使用react的思考

    1. 组件化开发:将可以复用的部分独立封装成一个组件,每个部分的数据互不影响

  8. delphi 取得任意程序的命令行

    program GetCommandLineExDemo; uses Windows; constSystemHandleInformation = 16;ProcessBasicInformatio ...

  9. javascript中{},[]中括号,大括号使用

    一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen",&qu ...

  10. Linux ftp 命令

    一.ftp的get命令和mget命令有何不同? get一次只下载一个文件:mget一次可以下载多个文件,而且支持通配符,需要注意的是在mget的时侯,需要对每一个文件都选择y/n,如果想不交互的下载全 ...