Chart.js给图片数据动态赋值

$(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}";

Chart.js给图片数据动态赋值相关推荐

img 显示默认图片,及动态赋值
<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.onerr ...
【HTML】Angular JS + Table 根据数据动态合并单元格
问题描述: 根据数据值将单元格合并如一级指标二级指标原始演示效果: 目标效果如图所示: 完整的http.post请求JS $http.post('../hnTProF3c/List', para ...
h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果
最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色这里一共是10个格子,每格代表一个范围边界,说 ...
原生JS实现任意数据的动态表格
昨天晚上有个女生叫我帮他看一下前端怎么通过 JQuery 向后台发送数据,今天上午刚测试完Java,下午就花了一点时间来实现动态表格案例,其实也不难,就是使用原生的JS来实现:其中有一个很奇葩的需求. ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
微信小程序 JS中遍历后台获取的data数据并赋值
开发场景: 需要把后台Java端查询到的图片动态显示在页面上. Java端传过来的图片是base64类型的,前一篇文章已经介绍怎么把base64 转为图片.https://blog.csdn.net/ ...
SpringBoot整合chart.js完成数据可视化，展现数据趋势与变化！
SpringBoot整合chart.js完成数据可视化项目源码点击进入github获取源码一个搭好的SpringBoot微服务框架,简单整合了一些东西,前后端分离,后端只需要向前端提供JSON ...
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
前端读取文件图片信息流；js读取图片不同信息流；js读取图片；前端就js读取二进制数据；前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件；
原文链接 FileReader来把文件读入内存,并且读取文件中的数据. readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL ...

Chart.js给图片数据动态赋值

Chart.js给图片数据动态赋值相关推荐

最新文章

热门文章