HTML5 Web app开发工具Kendo UI Web教程:如何添加仪表和图表

原创|行业资讯|编辑:龚雪|2013-10-15 17:31:46.000|阅读 1911 次

概述: 在本文中将以示例说明如何使用Kendo UI Web中的Kendo UI DataViz添加仪表和图表。下面的示例将说明如何添加一个图表到现有的页面,具体的示例如下。

相关链接:

    在本文中将以示例说明如何使用Kendo UI Web中的Kendo UI DataViz添加仪表和图表。下面的示例将说明如何添加一个图表到现有的页面,具体的示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Kendo UI Application</title>
</head>
<body>
    <header>
        <h1>My Kendo UI Application</h1>
    </header>
    <!-- page content goes here -->
    <div role="main">
    </div>
    <footer>
        <p>Kendo UI FTW!</p>
    </footer>
</body>
</html>
第一步是为jQuery 和Kendo UI DataViz添加脚本和样式表引用:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Kendo UI Application</title>

    <!-- CDN-based stylesheet reference for Kendo UI DataViz -->
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">

</head>
<body>
    <header>
        <h1>My Kendo UI Application</h1>
    </header>
    <!-- page content goes here -->
    <div role="main">
    </div>
    <footer>
        <p>Kendo UI FTW!</p>
    </footer>

    <!-- CDN-based script reference for jQuery; utilizing a local reference if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

    <!-- CDN-based script reference for Kendo UI DataViz; utilizing a local reference if offline -->
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.dataviz.min.js"></script>
    <script>(window.kendo && window.kendo.dataviz) || document.write('<script src="js/kendo.dataviz.min.js"><\/script>')</script>

</body>
</html>

下面就是要为图表声明一个目标元素,将会由一个div元素代表,还需要一个脚本块初始化和配置区域图,下面就是一个随着数据的区域图示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Kendo UI Application</title>

    <!-- Kendo UI HTTP CDN style reference for DataViz -->
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">

</head>
<body>
    <header>
        <h1>My Kendo UI Application</h1>
    </header>
    <!-- page content goes here -->
    <div role="main">
        <!-- chart/gauge -->
        <div id="chart">
        </div>
    </div>
    <footer>
        <p>Kendo UI FTW!</p>
    </footer>

    <!-- Google CDN reference for jQuery; utilizing a local reference if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

    <!-- Kendo UI HTTP CDN script reference for DataViz; utilizing a local reference if offline -->
    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.dataviz.min.js"></script>
    <script>(window.kendo && window.kendo.dataviz) || document.write('<script src="js/kendo.dataviz.min.js"><\/script>')</script>

    <script>
        // .ready() to initialise and configuration chart/gauge
        jQuery(document).ready(function($) {
            $("#chart").kendoChart({
                series: [
                    { name: "United States", data: [67.96, 68.93, 75, 74, 78] },
                    { name: "World", data: [15.7, 16.7, 20, 23.5, 26.6] }
                ],
                seriesDefaults: { type: "area" },
                width: 400
            });
        });
    </script>

</body>
</html>

>>>Kendo UI Web下载

慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

在线客服 在线QQ 电话咨询
400-700-1020
在线客服系统
live chat