如何使用DataGear制作服務(wù)端分頁的數(shù)據(jù)可視化圖表

發(fā)布時間：2022-01-05 16:43:04 來源：億速云閱讀：203 作者：小新欄目：大數(shù)據(jù)

這篇文章主要介紹了如何使用DataGear制作服務(wù)端分頁的數(shù)據(jù)可視化圖表，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

首先，新建兩個SQL數(shù)據(jù)集。

第一個數(shù)據(jù)集查詢服務(wù)端分頁數(shù)據(jù)，它是一個參數(shù)化數(shù)據(jù)集：

名稱：
服務(wù)端分頁-數(shù)據(jù)

SQL：
select
    *
from
    t_analysis
order by NAME asc
limit ${index}, ${size}

參數(shù)：
名稱    類型    必填   描述
index   數(shù)值     是    頁索引
size    數(shù)值     是    頁大小

第二個數(shù)據(jù)集查詢總記錄數(shù)：

名稱：
服務(wù)端分頁-總記錄數(shù)

SQL：
select count(*) as total from t_analysis

參數(shù)：
無

然后，新建一個圖表，并關(guān)聯(lián)上述兩個數(shù)據(jù)集：

名稱：
服務(wù)端分頁表格

類型：
基本表格

數(shù)據(jù)集：
1. 服務(wù)端分頁-數(shù)據(jù)
2. 服務(wù)端分頁-總記錄數(shù)（勾選【附件】單選框）

最后，新建一個看板，引入上述圖表，添加分頁擴展代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dg-dashboard{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.dg-chart{
  display: inline-block;
  width: 100%;
  height: 400px;
}
.chart-wrapper{
  display: inline-block;
  width: 80%;
  margin-left: 10%;
  padding: 2em 0em;
  border: 1px solid #ccc;
}
#pagination{
  text-align: center;
}
.pagination-button{
  border: 1px solid #333;
  border-radius: 5px;
  margin: 0 0.5em;
  padding: 0.5em 1.5em;
}
.pagination-current{
  background: blue;
  color: white;
}
.pagination-info{
  padding-left: 1em;
}
</style>
<script type='text/javascript'>
var pageSize = 5;

var chartListener=
{
  update: function(chart, results)
  {
    //獲取第一個附件數(shù)據(jù)集（服務(wù)端分頁-總記錄數(shù)）中的總記錄數(shù)
    var chartDataSet = chart.chartDataSetFirst(true);
    var totalResult = chart.resultOf(results, chartDataSet);
    var total = chart.resultCell(totalResult, "total", 0);

    //計算總頁數(shù)
    var pages = (total%pageSize == 0 ? parseInt(total/pageSize) : parseInt(total/pageSize)+1);
    
    //獲取當(dāng)前頁索引
    var currentIndex = chart.dataSetParamValue(0, 0);
    
    //繪制分頁按鈕
    var $pg = $("#pagination");
    $pg.empty();
    for(var i=1; i<=pages; i++)
    {
      var myIndex = (i-1)*pageSize;
      
      $("<button class='pagination-button' />").attr("page-index", myIndex)
        .addClass(currentIndex == myIndex ? "pagination-current" : "")
        .html(i).appendTo($pg);
    }
    
    $("<span class='pagination-info' />").html("共"+pages+"頁，"+total+"條記錄").appendTo($pg);
  }
};

function refreshChart(index)
{
  var chart = dashboard.getChart(0);
  //設(shè)置第一個數(shù)據(jù)集的頁索引、頁大小參數(shù)值
  chart.dataSetParamValues(0, { index: index, size: pageSize });
  //刷新圖表數(shù)據(jù)
  chart.refreshData();
}

$(function()
{
  //加載第一頁
  refreshChart(0);
  
  $("#pagination").on("click", ".pagination-button", function()
  {
    var index = parseInt($(this).attr("page-index"));
    refreshChart(index);
  });
});
</script>
</head>
<body class="dg-dashboard">
<div class="chart-wrapper">
  <div class="dg-chart"
    dg-chart-disable-setting="true"
    dg-chart-listener="chartListener"
    dg-chart-widget="上述圖表ID">
  </div>
  <div id="pagination"></div>
</div>
</body>
</html>

點擊[保存并展示]按鈕，打開看板展示頁面，完成！?。?/p>

效果圖如下所示：

如何使用DataGear制作服務(wù)端分頁的數(shù)據(jù)可視化圖表

同樣，服務(wù)端分頁的柱狀圖效果圖如下所示：

如何使用DataGear制作服務(wù)端分頁的數(shù)據(jù)可視化圖表

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用DataGear制作服務(wù)端分頁的數(shù)據(jù)可視化圖表”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

如何使用DataGear制作服務(wù)端分頁的數(shù)據(jù)可視化圖表

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽