carol2014 - 博客园

2023年5月

摘要：拼接SQL 需过滤字符串预防 SQL 注入，存入 NULL 值需要使用 MYSQL 函数。假定表中有 2 个字段 name(VARCHAR(20) NULL) 和 age(TINYINT(4) NULL) ，想要 name 字段写入 null 值，可以直接使用下面的 sql 语句： insert 阅读全文

posted @ 2023-05-12 09:55 carol2014 阅读(124) 评论(0) 推荐(0)

几个echarts使用小案例

摘要： y轴名称放左边、辅助线、时间轴标签、数值轴间隔 <div id="main" style="height: 400px"></div> <script> var chartDom = document.getElementById("main"); var myChart = echarts.ini 阅读全文

posted @ 2023-05-11 18:30 carol2014 阅读(324) 评论(0) 推荐(0)

使用laravel-snappy生成pdf

摘要： laravel-snappy 基于 wkhtmltopdf 工具，可以比较完美的将 web 页面转成 pdf 格式。安装过程顺便把 laravel 及 laravel-snappy 安装过程记录下 composer config -g repo.packagist composer https: 阅读全文

posted @ 2023-05-11 16:54 carol2014 阅读(373) 评论(0) 推荐(0)

记一次使用laravel-snappy把g2和plotly.js图生成pdf踩坑经历

摘要：最近有一个需求，需要把页面上的 echarts 等 js 组件生成的图表放到 pdf 中。使用 laravel 框架，找到了 laravel-snappy 这个包，其底层是使用 wkhtmltopdf 来生成 pdf。因为有把数据点都画到箱型图上的需求，找到了plotly.js 这个组件，功能还是很阅读全文

posted @ 2023-05-06 17:31 carol2014 阅读(137) 评论(0) 推荐(0)

2023年4月

可视化组件g2之分组箱型图、柱形图、散点图简单使用

摘要：因为要实现带扰动点的箱型图，特意去研究了下 g2，记录下。自从有需要在箱型图上添加扰动点这个需要之后，一直非常的纠结，好不容易找到了 plotly.js 这个组件，其箱型图自带可以添加所有扰动点，且不需要计算 Q1 这些值，非常强大，奈何其底层技术基于 D3 使用 SVG，对 canvas 和 w 阅读全文

posted @ 2023-04-06 15:31 carol2014 阅读(171) 评论(0) 推荐(0)

轮播图组件swiper之两个轮播图同步

摘要：试用下一个 swiper 轮播图作为另一个 swiper 轮播图的分页器，解决同步问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" conten 阅读全文

posted @ 2023-04-03 14:56 carol2014 阅读(512) 评论(0) 推荐(0)

bootstrap之carousel轮播图自定义分页器

摘要：最近要开发一个轮播图的看板页面，试用下 bootstrap 的轮播图组件，因为分页器的部分需要自定义（文字过长需要放到轮播图区域的外面），使用 List group 组件作为轮播图的分页器放在左边。 <!DOCTYPE html> <html lang="en"> <head> <meta char 阅读全文

posted @ 2023-04-03 14:49 carol2014 阅读(165) 评论(0) 推荐(0)

2023年3月

常用js类库

摘要： UI类库 bootstrap 12 栅格式布局，响应式布局，多种常用的组件 https://v5.bootcss.com/ layui 是一套开源的 Web UI 组件库，多种常用的组件，极易上手，拿来即用。 https://layuion.com/ TOAST UI 包括Chart、Editor( 阅读全文

posted @ 2023-03-28 11:29 carol2014 阅读(110) 评论(0) 推荐(0)

可视化组件plotly.js之spc、hoverTemplate、shapes示例

摘要： spc <div id="myDiv" style="width: 600px"></div> <script src="../plugins/d3.3.5.17.min.js"></script> <script src="../plugins/plotly.min.js"></script> < 阅读全文

posted @ 2023-03-22 16:15 carol2014 阅读(504) 评论(0) 推荐(0)

可视化组件plotly.js之方法、事件、config、layout

摘要：方法 <script src="../plugins/d3.3.5.17.min.js"></script> <script src="../plugins/plotly.min.js"></script> <script src="../plugins/jquery/jquery-1.9.1.js 阅读全文

posted @ 2023-03-22 15:51 carol2014 阅读(1549) 评论(0) 推荐(0)