HTML5 Web app开发工具Kendo UI Web教程：如何添加仪表和图表-控件新闻-慧都网

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

原创|行业资讯|编辑：郝浩|2013-10-15 17:31:46.000|阅读 2398 次

概述： 在本文中将以示例说明如何使用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 下载