adminLTE框架chart图表的使用

chart图表如图所示：

 <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查看源码发现其数据是写死的，如图：

有两种方法：一种是直接修改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]
  }
]
};

复制

再次查看图表如下：

然后我们将数据替换成从后台动态获取的，使用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;
}

复制

最后图表效果如图：

其中月份也可以从后台动态获取，显示截至到当前月的数据信息，其列表长度应当与数据列表长度一致。

两条曲线的数据也可以封装到一个对象里，使用一个ajax请求获取。这里可以根据自己需要修改。

其他更多更详细内容请参考Chart.js文档http://chartjs.cn/docs/