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>

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

时间： 2024-07-29 06:41:15

kendoui仪表板和直方图演示样本的相关文章

Cocos2d-x 3.2 Lua演示样本 ActionTest（操作测试）

Cocos2d-x 3.2 Lua演示样本 ActionTest(操作测试) 2014年博文大赛,请投上您宝贵的一票:http://vote.blog.csdn.net/Article/Details?articleid=38272837 移动开发狂热者群: 299402133,欢迎广大开发人员增加 Cocos2d-x官方真够给力的,3.1.1还没有熟悉完,3.2就出来.本篇博客继续介绍Cocos2d-x的Lua演示样例.关于3.2的样例变动不是非常大,略微介绍一下3.2的新特性吧: 3.2版本

Asp.net固定功能位充满了零（解决，演示样本）！

Asp.net固定功能位充满了零(解决.演示样本)! 在发展,其中,数实现出现8数字.但是,需要使用0加厚.例如:123,代表:0000123. 真实的比例,如下: decimal aaa = 123; // 数值型 string bbb = aaa.ToString(); // 转换为字符 bbb = bbb.PadLeft(7, '0'); // 共7位.之前用0补齐 response.write(bbb ); decimal aaa = 123; // 数值型 string bbb

HTML 5 在Web SQL 使用演示样本

Web sql 这是一个模拟数据库浏览器.可以使用JS操作SQL完成数据读取和写入,但是这件事情并不多,现在支持的浏览器,而其W3C规格已经停止支持.外形似它的前景不是很亮. W3C 规范:http://www.w3.org/TR/webdatabase/#dom-sqltransaction-sync-executesql (眼下已经停止更新,组织也没想清楚发展方向) 支持的浏览器以及版本号: Safari (3.2+) Chrome (3.0+) Opera (10.5+) 通经常规的离线应

MVC模式编程演示样本-登录认证（静态）

好,部分博客分享我的总结JSP-Servlet-JavaBean思想认识和三层编程模型的基本流程,ZH- CNMVC该示例实现演示的编程模式-登录身份验证过程,在这里,我仍在使用静态验证username和password.客有,这里仅仅是把一个实现过程告诉大家.不多说,见代码: 首先建一个JSP登录页面其次,我们建一个Servlet类获取client提交的信息然后.我们须要在web.xml配置Servlet选项,好像如今的Eclipse都是自己主动生成了Servlet的配置代码.只是大家还是

WebGL自学教程——WebGL演示样本：开始

最终开始WebGL样品演示,...... 开始使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的函数,參考<OpenGL ES 2.0编程指南>和各种已有的WebGL演示,针对获得的WebGL渲染环境进行操作,表达出你的意境. 为了获得WebGL的渲染环境.或者说,为了给WebGL一个渲染环境.我们须要在Web页面中定义一个名称为"canvas "的HTML5元素. 每一

Beginning Python From Novice to Professional (4) －演示样本格式字符串

$ gedit price.py #!/usr/bin/env python width = input('Please enter width: ') price_width = 10 item_width = width - price_width header_format = '%-*s%*s' format = '%-*s%*.2f' print '=' * width print header_format % (item_width, 'Item', price_width, 'P

epoll演示样本

server参考是别人的代码 #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <string.h> #include <sys/types.h> #include <netinet/in.h> #include <sys/socket.h> #include <sys/wait.h> #include <unistd.h

OpenStack入门——理论篇（二）：OpenStack的节点类型和架构（含登录的仪表板界面示例）

OpenStack入门--理论篇(二):OpenStack的节点类型和架构(含仪表板界面示例) 前言 ? 看了网上的一些博客对OpenStack架构的描述,大部分都是将官网的架构图截取下来(还是纯英文文字描述的图片)或者直接将描述翻译为中文直接复制粘贴过来了.如果对于初学者而言,这或许是有字天书了.所以笔者先前的一篇文章是介绍了关于OpenStack的基础知识和核心的组件服务.而本文先从OpenStack部署的节点结构描述,再来对其整体架构进行阐述. 一.OpenStack节点类型 ? 在介绍O

样品GA的良好理解

遗传算法演示样本手册模拟为了更好地理解遗传算法的计算过程,法的各个主要运行步骤. 例:求下述二元函数的最大值: (1) 个体编码遗传算法的运算对象是表示个体的符号串,所以必须把变量 x1, x2 编码为一种符号串. 本题中.用无符号二进制整数来表示. 因 x1, x2 为 0 ~ 7之间的整数.所以分别用3位无符号二进制整数来表示.将它们连接在一起所组成的6位无符号二进制数就形成了个体的基因型.表示一个可

kendoui仪表板和直方图 演示样本

kendoui仪表板和直方图 演示样本的相关文章

kendoui仪表板和直方图演示样本

kendoui仪表板和直方图演示样本的相关文章