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教程