$(document).ready(function () { //使用Ajax获取json数据 var jsonData = $.ajax({ url: 'getTotalAmountFormat', type: "get", dataType: 'json', }).done(function (results) { // 将获取到的json数据分别存放到两个数组中 var labels = [], data=[]; for (var item in results) { console.log(item);//得到键 console.log(results[item]);//得到键对应的值 labels.push(item); data.push(results[item]); } // 设置图表的数据 var tempData = { labels : labels, datasets: [{ label: '月销售额', data: data, backgroundColor: 'rgba(66, 165, 245, 0.5)', borderColor: '#2196F3', borderWidth: 1 }] }; // 获取所选canvas元素的内容 var ctx = document.getElementById("line-chart"); //设置图表高度 var myLineChart = new Chart(ctx, { type: 'line', data: tempData, options: { maintainAspectRatio: true, } }); }); }
* Chart.js * http://chartjs.org/ * Version: 2.7.2
后台:返回json格式数据
String str="{\"2018-05\": 389.0,\"2018-06\": 359.0,\"2018-07\": 383.0,\"2018-08\": 829.0,\"2018-09\": 829.0,\"2018-10\": 1029.0,\"2018-11\": 389.0}";