adminLTE框架chart图表的使用

chart图表如图所示：

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

有两种方法：一种是直接修改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 ,//请求urlasync: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文档

adminLTE框架chart图表的使用相关推荐

5分钟玩转Axure之快速创建Chart图表
Chart图表图表的作用 Axure创建图表的三种方式总结图表的作用图表是我们在产品中不可或缺的一部分:它主要承担着直观表现数据和客观分析数据的作用.很多决策分析会依靠图表进行输出,分析图表在 ...
php写网页6,基于ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码，ThinkPHP6开发的后台权限管理系统...
源码介绍基于最新ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码,基于最新版本的ThinkPHP 6.0.0RC3框架,后台前端框架采用AdminLTE.系统的核心理 ...
Open Flash Chart 图表组件
Open Flash Chart 图表组件下载:http://teethgrinder.co.uk/open-flash-chart/ data-files里是各种实例文件,调用即可预览. 实例: ...
强大的Winform Chart图表控件使用说明
强大的Winform Chart图表控件使用说明引言使用说明使用示例资料引言以前经常开发网页端的软件,图表组件一般用echart,功能和样式都非常齐全.但是当用winform开发时,类似的 ...
基于 WebGL 的 3D Chart 图表
现在工业 SCADA 上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是 echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻 ...
基于HTML5 Canvas的3D动态Chart图表
发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易 ...
uni-app中自定义图表（canvas实现chart图表）开发篇（1）-圆环带进度条
经常开发中,会遇到各种各样图表,这时大家普遍会想到去找插件.uniapp中常用的有uchart.js和echart.js,这对图表要求不高的项目来说,是很便捷的.但有时会遇到一些定制图表,加上UI的美 ...
微软C#中的CHART图表控件
http://www.cnblogs.com/winshe/articles/6604406.html https://blog.csdn.net/akof1314/article/details/5 ...
Chart图表整合——面积对比图、扇形图、柱状图
一. chart图表demo网址网址:http://antv.alipay.com/zh-cn/f2/3.x/demo/index.html 二. 本文主要对面积对比图,扇形图,柱状图三大常见图进行 ...

adminLTE框架chart图表的使用

adminLTE框架chart图表的使用相关推荐

最新文章

热门文章