如何在網頁中插入曲線圖?我找網路有chartjs、D3等，但大多都沒有講到即時更新的部分。我是初學者，希望有人能夠教學，或是網路教學方式聘請您。
我對HTML、CSS、javascript都有基本的認知。也有寫過簡單的一頁式網站。
已邀請的邦友 {{ invite_list.length }}/5
<div class="Cell" style="width: 400px">
<canvas id="myChart3" width="250" height="125"></canvas>
</div>
function changeChart3() {
var jsonData = JSON.stringify({
Type: "3",
CurrDate: $("#qryDate").val()
});
$.ajax({
type: "POST",
url: '@Url.Action("getOperationGoalStatic", "Home")',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: jsonData,
success: function (result) {
mData = result.split(';');
var d = new Date();
var month = d.getMonth()+1;
var ar2 = mData.slice(month, month * 2);
for (i = month; i < month * 2; i++) {
delete mData[i];
}
var config = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
datasets: [{
data: mData,
label: "達成率",
backgroundColor: "#61D8AB",
borderColor: "#61D8AB",
fill: false
}, {
data: ar2,
label: "預計目標",
backgroundColor: "#F5A7EA",
borderColor: "#F5A7EA",
fill: false
}
]
},
options: {
title: {
display: true,
text: '目標統計圖表'
}
}
};
var ctx = document.getElementById("myChart3").getContext("2d");
var myChart = new Chart(ctx, config);
},
error: function (xhr) {
MsgDialog(xhr.responseText);
}
});
}
[HttpPost]
public JsonResult getOperationGoalStatic(string Type, string CurrDate)
{
HCS.Service.NewService.CommonService commonService = ServiceManager.GetService<HCS.Service.NewService.CommonService>();
OperTargStatChartModels model;
IList<OperTargStatChartModels> list;
model = new OperTargStatChartModels()
{
CenterCode = UserInfo.GetCurrent().login_SysType
};
string mData = string.Empty;
list = new List<OperTargStatChartModels>();
model = commonService.GetOperTargStatChartByKey(model);
if (model != null)
{
list.Add(model);
string mToday = DateTime.Now.ToShortDateString().Replace("/", "");
int mMonth = DateTime.Now.Month;
int[] mGoalMonth = new int[12];
int[] mTargetMonth = new int[12];
string mCurrentDate = !string.IsNullOrWhiteSpace(list[0].CurrentDate) ? list[0].CurrentDate.ToString() : "";
HomeService homeService;
homeService = ServiceManager.GetService<HomeService>();
HomeCaseCnt homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "01" //首頁畫面條件：日期。
};
//即時業務狀態
HomeBusinessStateVM businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[0] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[0] = businessStateVM.CurrentAmountByMonth;//本月目前金額
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "02" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[1] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[1] = businessStateVM.CurrentAmountByMonth;//本月目前金額
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "03" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[2] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[2] = businessStateVM.CurrentAmountByMonth;//本月目前金額
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "04" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[3] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[3] = businessStateVM.CurrentAmountByMonth;//本月目前金額
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "05" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[4] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[4] = businessStateVM.CurrentAmountByMonth;//本月目前金額
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "06" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[5] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[5] = businessStateVM.CurrentAmountByMonth;//本月目前金額
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "07" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[6] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[6] = businessStateVM.CurrentAmountByMonth;//本月目前金額
if ( mMonth >= 8 )
{
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "08" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[7] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[7] = businessStateVM.CurrentAmountByMonth;//本月目前金額
}
if (mMonth >= 9)
{
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "09" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[8] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[8] = businessStateVM.CurrentAmountByMonth;//本月目前金額
}
if (mMonth >= 10)
{
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "10" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[9] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[9] = businessStateVM.CurrentAmountByMonth;//本月目前金額
}
if (mMonth >= 11)
{
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "11" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[10] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[10] = businessStateVM.CurrentAmountByMonth;//本月目前金額
}
if (mMonth >= 12)
{
homeCaseCntQuery = new HomeCaseCnt()
{
CenterCode = UserInfo.GetCurrent().login_SysType, //登入的機構代碼。
CurrentDate = DateTime.Now.Year + "12" //首頁畫面條件：日期。
};
//即時業務狀態
businessStateVM = homeService.GetBusinessState(homeCaseCntQuery);
mGoalMonth[11] = businessStateVM.GoalAmountByMonth;//本月目標金額
mTargetMonth[11] = businessStateVM.CurrentAmountByMonth;//本月目前金額
}
mData = mTargetMonth[0].ToString();
if (mMonth >= 2)
{
mData += ";" + mTargetMonth[1];
}
if (mMonth >= 3)
{
mData += ";" + mTargetMonth[2];
}
if (mMonth >= 4)
{
mData += ";" + mTargetMonth[3];
}
if (mMonth >= 5)
{
mData += ";" + mTargetMonth[4];
}
if (mMonth >= 6)
{
mData += ";" + mTargetMonth[5];
}
if (mMonth >= 7)
{
mData += ";" + mTargetMonth[6];
}
if (mMonth >= 8)
{
mData += ";" + mTargetMonth[7];
}
if (mMonth >= 9)
{
mData += ";" + mTargetMonth[8];
}
if (mMonth >= 10)
{
mData += ";" + mTargetMonth[9];
}
if (mMonth >= 11)
{
mData += ";" + mTargetMonth[10];
}
if (mMonth >= 12)
{
mData += ";" + mTargetMonth[11];
}
mData += ";" + mGoalMonth[0].ToString();
if (mMonth >= 2)
{
mData += ";" + mGoalMonth[1];
}
if (mMonth >= 3)
{
mData += ";" + mGoalMonth[2];
}
if (mMonth >= 4)
{
mData += ";" + mGoalMonth[3];
}
if (mMonth >= 5)
{
mData += ";" + mGoalMonth[4];
}
if (mMonth >= 6)
{
mData += ";" + mGoalMonth[5];
}
if (mMonth >= 7)
{
mData += ";" + mGoalMonth[6];
}
if (mMonth >= 8)
{
mData += ";" + mGoalMonth[7];
}
if (mMonth >= 9)
{
mData += ";" + mGoalMonth[8];
}
if (mMonth >= 10)
{
mData += ";" + mGoalMonth[9];
}
if (mMonth >= 11)
{
mData += ";" + mGoalMonth[10];
}
if (mMonth >= 12)
{
mData += ";" + mGoalMonth[11];
}
}
return Json(mData);
}
Controller 呼叫 DB 的方式有很多種，直接呼叫 Dapper 是比較簡單
即時更新的部分，資料應該都是要跟後端要吧，前端能做的就是設計好接口，當後端資料進來以後，馬上繪製一張新的曲線圖，渲染到畫面上，看起來就是即時更新，至於什麼時候該打 api 拿資料就看專案需求了
我都用 Highcharts 的圖表來做，有什麼不了解的部份可以直接用 GPT4 來詢問可以解決很多事情
我圖表是用Google Chart，並搭配setInterval()方法跟AJAX技術，
setInterval() -> 可以定時執行方法內的內容
AJAX -> 將資料傳給後端，接收後端資料
程式碼如下，您參考看看
// 使用setInterval方法,以固定時間重複執行function()內的內容
setInterval(function(){
var formData = $('#myForm').serialize(); // 將表單內容序列化為字串
$.ajax({
url: './viewjsonProductmA', //請求網址
type: 'POST', //請求方式
dataType:"json",//接收資料格式 (後端需有標註@ResponseBody的方法)
async:false,//false為非同步
data: formData,//要傳到後端的資料
success: function(mAdata) { //如有成功就會取得後端response的資料
updateChartmA(mAdata) // 執行業務邏輯及繪製Goole Chart的方法
},
error: function(xhr, status, error) {
}
});
}, 5000); // 每5秒執行一次
// ========== lint chart for mAdata ==========
function updateChartmA(mAdata){
var dataArray = [ ["mA_x_axix", "mA_value"] ]; // 建立數據表存放變數
/*
執行業務邏輯需求，將資料放入x軸(mA_x_axix)及y軸(mA_value)
*/
// array轉換google用的圖表數據
var data = google.visualization.arrayToDataTable(dataArray);
// 創建折線圖對象
var options = {
curveType: "none", // 折線平滑曲線
legend: "none", // 取消圖例
titleTextStyle: {
fontSize: 14, // 設置標題字體大小
bold: true, // 設置標題為粗體
italic: false // 設置標題為斜體
},
hAxis: { // 設置 x 軸
},
vAxis: { // 設置 y 軸
},
series: { // 設置圓形點
0: {
pointShape: 'circle', // 設置樣本點為圓形
pointSize: 8 // 設置樣本點的大小
},
},
chartArea: { // 設置圖形的位置及大小
width: '75%', // 圖表區域的寬度
height: '70%', // 圖表區域的高度
},
};
var chart = new google.visualization.LineChart(document.getElementById('mALinePlot'));
chart.draw(data, options); // 渲染折線圖
}
iThome鐵人賽
看影片追技術