adminLTE框架chart图表的使用

最新推荐文章于 2025-09-10 22:07:38 发布

原创最新推荐文章于 2025-09-10 22:07:38 发布 · 5.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #adminLTE #chart

Chart 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Chart.js图表中动态显示从后台获取的数据，包括使用Ajax进行同步数据请求，以及如何将获取的数据应用于图表的datasets。同时，探讨了如何使月份标签动态更新，以匹配数据的最新状态。

chart图表如图所示：

enter image description here

前端html标签如下：

 <div class="chart">                                    
     <canvas id="salesChart" style="height: 180px;">
     </canvas>
 </div>

引入js文件如下：

<script src="${prc}/bower_components/chart.js/Chart.js"></script>

<script src="${prc}/dist/js/pages/dashboard2.js"></script>

怎么将我们自己的数据动态显示在图表中呢？

进入dashboard2.js查看源码发现其数据是写死的，如图：

enter image description here

有两种方法：一种是直接修改dashboard2.js源码，一种是自己重新起一个id，自己创建chart图表，我这里直接在源码上进行修改。

修改如下：

 var salesChartData = {
labels  : ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
datasets: [
  {
    label               : 'Electronics',
    fillColor           : 'rgb(210, 214, 222)',
    strokeColor         : 'rgb(210, 214, 222)',
    pointColor          : 'rgb(210, 214, 222)',
    pointStrokeColor    : '#c1c7d1',
    pointHighlightFill  : '#fff',
    pointHighlightStroke: 'rgb(220,220,220)',
    data                : [65, 59, 80, 81, 56, 55, 40,0,0,0,42,0]
  },
  {
    label               : 'Digital Goods',
    fillColor           : 'rgba(60,141,188,0.9)',
    strokeColor         : 'rgba(60,141,188,0.8)',
    pointColor          : '#3b8bba',
    pointStrokeColor    : 'rgba(60,141,188,1)',
    pointHighlightFill  : '#fff',
    pointHighlightStroke: 'rgba(60,141,188,1)',
    data                : [28, 48, 40, 19, 86, 27, 90,0,0,87,0,0]
  }
]
};

再次查看图表如下：

enter image description here

然后我们将数据替换成从后台动态获取的，使用ajax获取数据，记得改为同步，否则数据返回后无法获取，如下：

function getData(url) {
var data = "";
    $.ajax({
        type: "POST",//POST方式提交
        dataType: "json",//返回json类型
        url: url ,//请求url
        async:false,//同步
        success: function (result) {
            data =  result;
        },
    });
    return data
}

然后将图表的data数据直接从该ajax方法获取：

 var salesChartData = {
labels  : ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
datasets: [
  {
    label               : 'Electronics',
    fillColor           : 'rgb(210, 214, 222)',
    strokeColor         : 'rgb(210, 214, 222)',
    pointColor          : 'rgb(210, 214, 222)',
    pointStrokeColor    : '#c1c7d1',
    pointHighlightFill  : '#fff',
    pointHighlightStroke: 'rgb(220,220,220)',
    data                : getData("/data/getVisitReportData")
  },
  {
    label               : 'Digital Goods',
    fillColor           : 'rgba(60,141,188,0.9)',
    strokeColor         : 'rgba(60,141,188,0.8)',
    pointColor          : '#3b8bba',
    pointStrokeColor    : 'rgba(60,141,188,1)',
    pointHighlightFill  : '#fff',
    pointHighlightStroke: 'rgba(60,141,188,1)',
    data                : getData("/data/getUserReportData")
  }
]
};

后台我使用简单数据进行模拟，代码如下：

@Controller
@RequestMapping("/data")
public class DataController {
@RequestMapping("/getVisitReportData")
@ResponseBody
public List getVisitReportData(){
    List list = new ArrayList(  );
    list.add( 13 );
    list.add( 0 );
    list.add( 34 );
    list.add( 19 );
    list.add( 48 );
    list.add( 64 );
    list.add( 32 );
    list.add( 87 );
    list.add( 59 );
    list.add( 32 );
    list.add( 15 );
    list.add( 6 );

    return  list;
}

@RequestMapping("/getUserReportData")
@ResponseBody
public List getUserReportData(){
    List list = new ArrayList(  );
    list.add( 23 );
    list.add( 2 );
    list.add( 77 );
    list.add( 43 );
    list.add( 97 );
    list.add( 64 );
    list.add( 21 );
    list.add( 45 );
    list.add( 37 );
    list.add( 10 );
    list.add( 65 );
    list.add( 19 );
    return  list;
}

最后图表效果如图：

enter image description here