DataGear 資料視覺化看板整合前端框架Vue
阿新 • • 發佈：2022-12-11
DataGear 看板JS物件的loadUnsolvedCharts()函式，用於非同步載入頁面端動態生成的圖表元素，利用它，可以很方便整合Angular、React、Vue等前端框架。
本文以Vue為例，詳細介紹如何進行整合。
首先，點選看板管理頁面的【新增】按鈕，新建一個看板，HTML模板內容如下：
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
</body>
</html>
儲存後，點選看板新增頁面右側的上傳資源圖示按鈕，上傳Vue庫看板資源（管理員可上傳看板全域性資源，看板中可直接引入），上傳後看板資源列表為：
index.html
vue-2.6.12.js
然後，在看板HTML模板中引入Vue庫：
<!DOCTYPE html>
<html>
<head>
...
<script src="vue-2.6.12.js"></script>
</head>
<body>
</body>
</html>
最後，編寫Vue元件，並在Vue渲染完成後，呼叫loadUnsolvedCharts()函式非同步載入圖表：
<!DOCTYPE html> <html dg-loadable-chart-widgets="all"> <head> ... <script src="vue-2.6.12.js"></script> </head> <body> <div id="app"> <div v-for="chartId in chartIds" v-bind:dg-chart-widget="chartId" style="width:300px;height:300px;"></div> </div> </body> </html> <script> var app = new Vue({ el: '#app', data: { chartIds: ['圖表部件ID-0', '圖表部件ID-1', '圖表部件ID-2'] }, mounted: function() { dashboard.loadUnsolvedCharts(); } }); </script>
官網地址：
原始碼地址：