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

时间  2019-11-17
标签 html5 html web app 开发 工具 kendo 如何 添加 仪表 图表 栏目 HTML5 繁體版
原文   原文链接

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

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>My Kendo UI Application</title>  
  6. </head>  
  7. <body>  
  8.     <header>  
  9.         <h1>My Kendo UI Application</h1>  
  10.     </header>  
  11.     <!-- page content goes here -->  
  12.     <div role="main">  
  13.     </div>  
  14.     <footer>  
  15.         <p>Kendo UI FTW!</p>  
  16.     </footer>  
  17. </body>  
  18. </html> 
>>> 完整示例代码

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

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>My Kendo UI Application</title>  
  6.    
  7.     <!-- Kendo UI HTTP CDN style reference for DataViz -->  
  8.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">  
  9.    
  10. </head>  
  11. <body>  
  12.     <header>  
  13.         <h1>My Kendo UI Application</h1>  
  14.     </header>  
  15.     <!-- page content goes here -->  
  16.     <div role="main">  
  17.         <!-- chart/gauge -->  
  18.         <div id="chart">  
  19.         </div>  
  20.     </div>  
  21.     <footer>  
  22.         <p>Kendo UI FTW!</p>  
  23.     </footer> 
>>> 完整示例代码
>>> Kendo UI Web 下载
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程