【Vue】canvas画图之小程序“隐藏”画布 近期在工作上有项目使用到canvas来生成图片，并提供下载的功能。基于canvas不支持自适应，都是用的px作为单位。当然网络上也有一些教程是使用比如计算像素比来金星等比例调整的。我也参考了网络上的几种方式进行了一些调整操作。发现都是有些不太稳妥，最后还是采取了生成图片后隐藏画布，用img来展示图片并提供下载（保存）的功能。也的确是可以实现的，但是，在这个过程中会有一个canvas隐藏然后展示img的切换过程，画面一闪而过的。。。在用户使用体验上并不是太好，但是又不能在一开始就把canvas给隐藏掉。否则draw()的回调进不去。于是在思考再三，尝试如下操作： <view style="top:-999999999999rpx;"> <canvas canvas-id="canvasId" id="canvasId"></canvas> </view> 这个操作把画布移除了当前的展示区与。然后在画图过程中使用loading加载框，在会话完成后隐藏loading加载框，展示图片。体验上就好了许多，又不会导致画图出现问题。顺便记录一下，canvas画布 宽高使用100%，不给宽高，都有可能导致draw回调不执行，小程序下添加type="2d" 标签也可能导致画布不显示。

uniapp开发微信小程序容易忽略的问题 使用微信登录的时候，微信官方之前做过一次更新，如果还是调用原有的uni.getUserInfo()只会获取到匿名用户数据。要调用uni.getUserProfile()才可以正常获取到用户数据，并且这个uni.getUserProfile()不能放在异步进程里，否则无法唤起用户授权界面，且微信接口会返回没有权限获取。按钮不再需要添加open-type属性，直接使用@click调用获取授权的方法即可。。。目前只有腾讯小程序需要做这个改动。其他平台小程序暂未有此类问题。做个记录。以免后期遗忘。

Laravel-Admin列表筛选后BootStrap-PopOver插件失效 最早的时候用的是 title 进行的气泡提示。发现响应速度慢，样式也不是很好看。于是想起了popover气泡插件。 近日，在优化列表气泡问题的时候，叶子遇到了这样一个问题。首次进入界面。popover正常。 但是在筛选后重载列表的时候。popover就失效了。 检查相关元素，代码未丢失。 于是就只能判断是初始化失效了。 一通搜索的结果，发现有不少append之后popover失效的问题。综合以上判断， 在bootstrap.php中添加如下代码： Admin::script(' (function(){ $("[data-toggle=\'popover\']").popover(); })() ');

Laravel-Admin下使用chartjs模板渲染问题一例 叶子最近在做图表的时候遇到一个问题。挣扎了很久。。。最后的最后才破案。。。 下面直接上代码：后端代码： //>计算起止时间相差月份 $month = $this->count_month($start_time,$end_time); $pay_date = []; for($i=0;$i结尾月份固定为$end_time $pay_date[] = (string)date('Y-m',strtotime($end_time)); 这样返回到前端后格式如下： 这样看来。后端返回数据就正常了。我们来看前端。。。下面第一个版本： <canvas id="linePay" style="width:200px;height:50px;"></canvas> $(function () { var ctx = document.getElementById("linePay").getContext('2d'); var smmyChart = new Chart(ctx, { type: 'line', data: { labels:[ @foreach($pay_dates as $v) {{$v}}, @endforeach ], datasets: [{ label: "收费金额", data: [ @foreach($sum_pay as $v) {{$v}}, @endforeach ], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255,99,132,1)', borderWidth: 1 }, ] }, options: { barPercentage: 1.0, categoryPercentage: 1.0, legend:false, title: { display: false, text: '月收费金额' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks:{ min:0, beginAtZero: true }, }] } } }); }); 这样运行下来。chartjs直接把labels里的年-月当成了减法运算。。。导致了： 接下来一番折腾。是第二版本： <canvas id="linePay" style="width:200px;height:50px;"></canvas> $(function () { var ctx = document.getElementById("linePay").getContext('2d'); var smmyChart = new Chart(ctx, { type: 'line', data: { labels:[ @foreach($pay_dates as $v) {{(string)$v}}, @endforeach ], datasets: [{ label: "收费金额", data: [ @foreach($sum_pay as $v) {{$v}}, @endforeach ], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255,99,132,1)', borderWidth: 1 }, ] }, options: { barPercentage: 1.0, categoryPercentage: 1.0, legend:false, title: { display: false, text: '月收费金额' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks:{ min:0, beginAtZero: true }, }] } } }); }); 以为强制string后可以达到效果。。。结果真的是然并卵。。。最后的最后。。。才突然想起是不是混编不识别这个东西。。。所以有了第三个版本： <canvas id="linePay" style="width:200px;height:50px;"></canvas> $(function () { var ctx = document.getElementById("linePay").getContext('2d'); var smmyChart = new Chart(ctx, { type: 'line', data: { labels:[ @foreach($pay_dates as $v) "{{$v}}", @endforeach ], datasets: [{ label: "收费金额", data: [ @foreach($sum_pay as $v) {{$v}}, @endforeach ], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255,99,132,1)', borderWidth: 1 }, ] }, options: { barPercentage: 1.0, categoryPercentage: 1.0, legend:false, title: { display: false, text: '月收费金额' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks:{ min:0, beginAtZero: true }, }] } } }); }); 运行后： 至此排除问题→_→真真是轮引号的重要性。。。

Laravel-Admin使用Vue给ChartJS动态增加数据 首先需要引入几个JS:<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="/path/to/js/axios.min.js"></script> <script src="/vendor/laravel-admin-ext/chartjs/Chart.bundle.min.js"></script>然后body部分：<div id="app"> <canvas id="myChart" style="width:200px;hegiht:200px;"></canvas> </div>接下来在JS部分：var app = new Vue({ el: '#app', data: { //>定义数据 labels: [], datas: [], }, methods: { draw() { var self = this; axios.get('/admin/test?axios').then(function (res) { //>遍历处理数据 for (var key in res.data.labs) { self.labels.push(res.data.labs[key]); } for (var key in res.data.data) { self.datas.push(res.data.data[key]); } //>开始图表绘制 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', //>bar为柱状图，line为折线图，还有其他的图表方式，可以按照自己需求，从官方文档中获取更多类型 data: { labels: self.labels, //>x轴标签 datasets: [{ label: "", //>第一个标签 data: self.datas, //>展示数据 backgroundColor: [ //>柱状图背景色，折线图的话就是填充背景色，如果存在多个数据则用数组，单条数据则不需使用数组。 'rgba(255, 99, 132, 0.2)', 'rgba(26,66,230,0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', ], borderColor: [ //>边框颜色 'rgba(255,99,132,1)', 'rgba(26,66,230,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', ], borderWidth: 1 //>边框宽度 }] }, options: { categoryPercentage: 1.0, legend: false, //>是否显示图标顶部图示 title: { //>图标顶部标题显示，可以用来显示一些统计信息之类的 display: true, text: 'this is title' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks: { barPercentage: 1.0, beginAtZero: true }, }] } } }); }, function (err) { }) } }, mounted() { }, created() { this.draw(); } })