2. 程式人生 > >前端 Highcharts圖表,如何動態傳入資料

前端 Highcharts圖表,如何動態傳入資料

阿新 • • 發佈：2019-01-24

  第一種: 折線圖  

jsp:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>折線圖</title>
</head>


<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首頁 <span class="c-gray en">&gt;</span> 統計管理 <span class="c-gray en">&gt;</span> 折線圖
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="重新整理"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container" id="newUser_body">
<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作為公共模版分離出去-->
<script type="text/javascript" src="${base}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${base}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${base}/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${base}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
<script type="text/javascript" src="${base}/static/common.js"></script>
<!--請在下方寫此頁面業務相關的指令碼-->
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
//定義一個Highcharts的變數，初始值為null
var oChart = null;
//定義oChart的佈局環境
//佈局環境組成：X軸、Y軸、資料顯示、圖示標題
var oOptions = {
//設定圖表關聯顯示塊和圖形樣式
chart: {
renderTo: 'container', //設定顯示的頁面塊
type: 'line' //設定顯示的方式
//type: 'column'
},
//圖示標題
title: {
text: '本月新增使用者和流失使用者圖表'
//text: null, //設定null則不顯示標題
},
//x軸
xAxis: {
categories: ['一號', '二號', '三號', '四號', '五號', '六號', '七號', '八號', '九號', '十號', '十一號', '十二號', '十三號', '十四號', '十五號', '十六號', '十七號', '十八號', '十九號', '二十號', '二十一號', '二十二號', '二十三號', '二十四號', '二十五號', '二十六號', '二十七號', '二十八號', '二十九號', '三十號', '三十一號']
},
//y軸
yAxis: {
title: {
text: '人數 (個)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
lang: {
              　 printChart:"列印圖表",
                 downloadJPEG: "下載JPEG 圖片" , 
                 downloadPDF: "下載PDF文件"  ,
                 downloadPNG: "下載PNG 圖片"  ,
                 downloadSVG: "下載SVG 向量圖" , 
                 exportButtonTitle: "匯出圖片" 
          },
credits: {
enable: 'false',
text: '<b style="font-size:12px;">遊戲統計中心</b>',
href: ' '
},
//資料列
series: []
};


$(document).ready(function() {
oChart = new Highcharts.Chart(oOptions);
//非同步動態載入資料列
LoadSerie_Ajax();
LoadSerie_Ajax2();
});


//非同步讀取資料並載入到圖表
function LoadSerie_Ajax() {
oChart.showLoading();
$.ajax({
url: '${base}/count/getNgCount.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(rntData) {
var oSeries = {
name: "流失使用者數量",
data: rntData.data
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}


function LoadSerie_Ajax2() {
oChart.showLoading();
$.ajax({
url: '${base}/count/getCount.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(rntData) {
var oSeries = {
name: "新增使用者數量",
data: rntData.data
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
</body>
</html>

後臺:

@ResponseBody
@RequestMapping(value = "/getCount.do")
public Message getCount(Integer id, Model model) {
int[] arr = {123,100,99,88,77,66,55,44,33,23,30,10,20,30,40,50,200,70,100,90,200,100,60,23,30,10,20,30};
return new Message(arr);
}

折線圖,柱狀圖,區域圖基本查不多,改下type : column(柱狀圖),area(區域圖) 效果自己看上傳圖片,

第二種 :時間軸折線圖 

jsp:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>時間軸折線圖</title>
</head>


<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首頁 <span class="c-gray en">&gt;</span> 統計管理 <span class="c-gray en">&gt;</span> 時間軸折線圖
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="重新整理"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作為公共模版分離出去-->
<script type="text/javascript" src="${base}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${base}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${base}/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${base}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
<script type="text/javascript" src="${base}/static/common.js"></script>
<!--請在下方寫此頁面業務相關的指令碼-->
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
//定義一個Highcharts的變數，初始值為null
var oChart = null;
//定義oChart的佈局環境
//佈局環境組成：X軸、Y軸、資料顯示、圖示標題
var oOptions = {
//設定圖表關聯顯示塊和圖形樣式
chart: {
renderTo: 'container', //設定顯示的頁面塊
type: 'area' //設定顯示的方式
//type: 'column'
},
//圖示標題
title: {
text: '本月每天線上人數表'
//text: null, //設定null則不顯示標題
},
//x軸
xAxis: {
//categories: ['一號', '二號', '三號', '四號', '五號', '六號', '七號', '八號', '九號', '十號', '十一號', '十二號', '十三號', '十四號', '十五號', '十六號', '十七號', '十八號', '十九號', '二十號', '二十一號', '二十二號', '二十三號', '二十四號', '二十五號', '二十六號', '二十七號', '二十八號', '二十九號', '三十號', '三十一號']
type: 'datetime',
//maxZoom: 1000 * 60 * 60 * 24,
title: {
text: null
}
},
//y軸
yAxis: {
title: {
text: '線上人數'
}
},
tooltip: {
shared: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
credits: {
enable: 'false',
text: '<b style="font-size:12px;">遊戲統計中心</b>',
href: ' '
},
//資料列
series: []
};
$(document).ready(function() {
oChart = new Highcharts.Chart(oOptions);
//非同步動態載入資料列
LoadSerie_Ajax();
});
//非同步讀取資料並載入到圖表
function LoadSerie_Ajax() {
oChart.showLoading();
$.ajax({
url: '${base}/count/getNgCount.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(rntData) {
var oSeries = {
name: "流失使用者數量",
pointInterval: 12 * 3600 * 1000, //間隔12小時取一次資料
pointStart: Date.UTC(2017, 10, 23),
data: rntData.data
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
</body>
</html>

後臺:

@ResponseBody
@RequestMapping(value = "/getNgCount.do")
public Message getNgCount(Integer id, Model model) {
List<Integer> list = new ArrayList<>();
list.add(20);
list.add(30);
list.add(40);
list.add(50);
list.add(60);
list.add(80);
list.add(90);
list.add(110);
list.add(40);
list.add(50);
list.add(60);
list.add(80);
list.add(90);
list.add(110);
list.add(20);
list.add(30);
list.add(110);
return new Message(list);
}

第三種 :餅狀圖

jsp:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${base}/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>餅狀圖</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首頁 <span class="c-gray en">&gt;</span> 統計管理 <span class="c-gray en">&gt;</span> 餅狀圖
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="重新整理"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作為公共模版分離出去-->
<script type="text/javascript" src="${base}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${base}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${base}/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${base}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
<script type="text/javascript" src="${base}/static/common.js"></script>
<!--請在下方寫此頁面業務相關的指令碼-->
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="${base}/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
//定義一個Highcharts的變數，初始值為null
var oChart = null;
//定義oChart的佈局環境
//佈局環境組成：X軸、Y軸、資料顯示、圖示標題
var oOptions = {
//設定圖表關聯顯示塊和圖形樣式
chart: {
renderTo: 'container', //設定顯示的頁面塊
type: 'pie'
},
//圖示標題
title: {
text: '每月餘額比例人數'
//text: null, //設定null則不顯示標題
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits: {
enable: 'false',
text: '<b style="font-size:12px;">遊戲統計中心</b>',
href: ' '
},
lang: {　
printChart: "列印圖表",
downloadJPEG: "下載JPEG 圖片",
downloadPDF: "下載PDF文件",
downloadPNG: "下載PNG 圖片",
downloadSVG: "下載SVG 向量圖",
exportButtonTitle: "匯出圖片"
},
//資料列
series: []
};
$(document).ready(function() {
oChart = new Highcharts.Chart(oOptions);
//非同步動態載入資料列
LoadSerie_Ajax();
});
//非同步讀取資料並載入到圖表
function LoadSerie_Ajax() {
//debugger;
oChart.showLoading();
$.ajax({
url: '${base}/count/getPie1.do',
type: 'POST',
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(result) {
var json = result.data; //傳入的map               
var jsondata = []; //定義一個空的陣列          
for(var i in json) { //遍歷
jsondata.push([i, json[i]]); //賦值 
}
var oSeries = {
name: "餘額分佈圖",
data: jsondata //將陣列傳入
};
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
</body>
</html>

後臺:

@ResponseBody
@RequestMapping(value = "/getPie1.do")
public Message getPie1(Integer id, Model model) {
//{"雜想":1,"心情":1,"ckeditor":3,"文藝":1,"隨筆":1,"進步":1,"感想":1,"xheditor":2,"java":1,"測試":1,"css":1}; 
Map<String, Integer> data =  new HashMap<>();
data.put("雜想", 30);
data.put("心情", 10);
data.put("文藝", 20);
data.put("隨筆", 15);
data.put("感想", 15);
data.put("測試", 10);
return new Message(data);
}

相關推薦

前端 Highcharts圖表,如何動態傳入資料

  第一種: 折線圖   jsp: <!DOCTYPE HTML> <html><head><meta charset="utf-8"><meta name="renderer" content="webkit|ie-c

【mpvue】實現echarts圖表動態載入資料

功能描述 使用mpvue框架開發微信小程式。目的效果為小程式中顯示一個折線圖，當點選切換按鈕時，切換圖表。 實現步驟 1.查詢mpvue官方文件關於echarts的實現方式------靜態載入圖表，只加載一次 2.實現動態載入圖表（能夠根據需求多次繪製圖表） 思

ASP.NET中動態獲取資料使用Highcharts圖表控制元件

<%@ Page Title="" Language="C#" MasterPageFile="~/MyHome/MasterPage.master" AutoEventWireup="true" CodeFile="ryfb.aspx.cs" Inherits="MyHome_tixi_ryfb"%&

highcharts實現動態重新整理兩（多）組資料

(function () {(function () { (document).ready(function () { Highcharts.setOptions({ global: { useUTC: false } }); var char

highcharts click事件獲取資料傳給datagrid ，動態載入資料

點選highcharts的柱子 會觸發click事件，並將資料傳給後臺獲取到相應部門下的所有員工資訊顯示在datagrid 如下：新增在charts的初始化裡 [java]  view plain  copy

vue專案中使用Echarts 動態更改圖表資料 ， Vue 折線圖、柱狀圖等圖表動態重新整理 ，

問題：在vue元件中，用echarts外掛 動態獲取、修改圖表資料 解決：已解決！ 第一步：開啟cmd命令視窗 安裝echarts依賴 安裝：npm install echarts -S 第二步：在main.js中全域性引入   //引入echarts的圖表外掛

使用Echarts圖表動態載入餅圖資料 pie

//JS成功後的程式碼functionbind(result){// 基於準備好的dom，初始化echarts圖表var TypeSalesChart = echarts.init(document.getElementById('main')); var option = { too

前端圖表製作——HighCharts圖表入門

HighCharts圖表入門 HighCharts的作用 ​ 在JavaEE企業級專案開發中，很多專案都會用到資料的統計和圖表的展示功能，如：各種股票系統，銀行的資金結算，公司的財務報表，等等。如何快速高效的開發這些圖表是一件麻煩的事。 HighCharts可以

Echarts圖表通過Ajax動態更新資料

由於業務需求需要做一個視覺化的展示Demo，這個Demo需要前後端的共同支撐，所以思路大致是：首先我們想到的是用ajax動態請求服務端獲取到json檔案後，然後將其解析為可以直接使用的資料，最後把這些資料更新到Echarts中去。 簡單的程式碼實現如下： H

ECharts通過Ajax動態載入資料到圖表

參考官網：http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2 要展示的圖表像這樣： 現在開始前後端程式碼展示。by the way，使用的開發框架為nutz，重點還是echarts資料。不要本末倒置。

highcharts圖表常見問題：關於如何設定資料點起始位置為座標原點的問題分析與總結篇獨家爆料

$(function () { var categories = ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']; $('#container

前端工程化之動態資料代理

引言 在前端開發過程中，開發者通常都會遇到前端資料不能正常獲取的問題，這就需要開發者之間’想辦法‘搞到這些資料；開發過程中我們可能遇到的場景： 後端介面資料開發中暫時不可用，需要前端在自己本地mock介面資料進行開發 重構一個已有的前端功能，在測試環境開發功能，這時可能

echarts實現一個頁面同時顯示多個不同形狀的圖表/動態往圖表中存放資料

最近做的一個專案的其中一個頁面有圖表展示資料的需求，有柱狀圖、折線圖和餅圖，於是引入了強大的echarts. echarts的強大之處和有點這裡就不多說了，詳細請參照echarts官網和echarts線上demo。 但是我們的頁面要展示的資料比較多，同一個頁

echarts動態載入資料，顯示柱狀圖，餅圖圖表

第一次寫部落格，有點小激動。公司正在開發的web版固定資產管理軟體，需要做報表，需要直觀的顯示一些領導感興趣的資料。就想到百度的echarts啦，關於echarts的更多資訊請移步echarts首頁。  言歸正傳。第一步，在jsp頁面，需要引入esl.js,它是一個瀏覽器端

easyui和highcharts 動態載入資料和X軸資料

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4

[JS前端開發] js/jquery控制頁面動態載入資料 滑動滾動條自動載入事件

本人小菜鳥一隻，為了自我學習和交流PHP（jquery,linux,lamp,shell,javascript,伺服器）等一系列的知識，小菜鳥建立了一個群。希望光臨本部落格的人可以進來交流。尋求共同

Android圖表控制元件MPAndroidChart——曲線圖LineChart（多條曲線）動態新增資料

發現最新的MPAndroidChart和以前版本的使用有一些差距，就寫下了現在新版的使用方法相關文章：一.效果圖一條曲線動態新增資料（X軸為當前時間）多條曲線線動態新增資料（X軸為當前時間）二.實現效果1.X軸為當前時間，只需要Y軸資料即可2.X軸的值為字串，而Entry的構

前端jquery treeTable動態繫結資料

一開始是打算ul、li一級級寫，後來發現tree控制元件非常好用，然後就學習了一下 function tablepost() { $.post("${pageContext.request.contextPath}/menu/allti

前端公共圖表資料大盤方案

前言 前端常常會在的業務中後臺開發資料統計圖表，對於類似Echarts這種配置性極強的庫，需要花費很多時間檢視文件， 一個專案中統計圖表大多情況下只佔少部分，平時寫的不多容易忘記配置，重複開發的效率低。產品經理對於圖表的設計個性化明顯（今天看到一種樣式的圖表覺得也挺好，然後就想照搬到自己業務之中），同類型的圖

循序漸進VUE+Element 前端應用開發(27）--- 資料表的動態表單設計和資料儲存

在我們一些系統裡面，有時候會需要一些讓使用者自定義的資料資訊，一般這些可以使用擴充套件JSON進行儲存，不過每個業務表的顯示專案可能不一樣，因此需要根據不同的表單進行設計，然後進行對應的資料儲存。本篇隨筆結合基於Vue+Element實現動態表單的設計、資料錄入儲存的相關操作。 1、動態表單的設計 動態表單的