使用 jQuery ajax 上傳 csv 後並透過 D3.js 畫出圖表

2021-07-17 12:24:54

也是最近遇到的需求，算是綜合題，想要在網頁上用 ajax 動態上傳檔案後並馬上繪製出圖表，結合 jquery 跟 d3.js。

用 bootstrap 來畫的，所以先準備 html。

view plain copy to clipboard print

<form class="form-inline">
<div class="form-group">
<label for="">上傳 csv: </label><input name="csv_file" type="file" id="csv_file">
</div>
<a role="button" class="btn btn-primary" id="upload_csv">確認上傳</a>
</form>
<div id="chart"></div>

code 都在這邊，想用在自己拿去改，簡單的說就是上傳後把 csv 用 d3 處理後再把圖表畫出來就可以了，範例使用 d3.js 的 3d 甜甜圈。

view plain copy to clipboard print

$("#upload_csv").click(uploadCsv);
function uploadCsv(){
//file object
csv = $("#csv_file")[0].files;
var data = new FormData();
data.append("csv_file", csv[0]);
$.ajax({
url: "handle url",
type: 'POST',
data: data,
cache: false,
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success: function(data, textStatus, jqXHR)
{
$csvData="upload/"+data;
d3.csv($csvData, function(data) {
arrayLength=list.length;
for($i=0;$i<arrayLength;$i++){
list[$i]["color"]=color($i);
}
svg.remove();
svg = d3.select("#chart").append("svg").attr("width",400).attr("height",300);
svg.append("g").attr("id", "salesDonut");
Donut3D.draw("salesDonut", list, 150, 150, 130, 100, 30, 0.4);
var info = svg.selectAll("g.info")
.data(list)
.enter()
.append("g")
.attr("class", "info")
.attr("transform", "translate(" + 300 + "," + 50 + ")");
info.append("text")
.attr("x", 10)
.attr("y", function(d, i){
return i*24;
})
.attr("fill", function(d, i) {
return color(i);
})
.text(function(d, i) {
return d.label+": "+d.value;
});
});
if(typeof data.error === 'undefined')
{
// Success so call function to process the form
}
else
{
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// Handle errors here
console.log('ERRORS: ' + textStatus);
// STOP LOADING SPINNER
}
});
}

[jQuery Plugin] 倒數計時- jQuery.countdown [PHP] 透過 array_map 把陣列內容重整後輸出

你可能也會喜歡的

[Vue.js] 自訂上傳按鈕

javascript 的立即呼叫的函式表示式-Immediately Invoked Functions Expressions(IIFE)

paroller.js- 好用的視差滾動套件

[javascript] 四捨五入- Math.round()

Vaadin web components- 擁有超過 30 個 UI 元件的 javascript 元件庫

Vue.js Example：收錄許多優秀 Vue.js 與元件的網站

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。