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

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

  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元素代表,还需要一个脚本块初始化和配置区域图,下面就是一个随着数据的区域图示例。

  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 下载

你可能感兴趣的:(Web,Web,UI,html5,APP,Kendo,图表添加)