使用jQuery Sparklines绘制一些简单的图表

之前做图标和曲线,直方图都是用echart,一直觉得用这种框架做一些小图表太过于笨重,于是找到了这个sparklines的jq插件,下面我们来介绍下sparklinessparkline是一类信息体积小和数据密度高的图表。目前它被用作一些测量,相关的变化的信息呈现的方式,如平均温度,股市交投活跃,sparkline常常以一组多条的形式出现在柱状图,折线图当中sparklines插件官网https://omnipotent.net/jquery.sparkline/#s-about具体官网给了一个demo例子,我们来看看,注意使用的时候我们还是需要先引入j...

阅读全文

flask整合wangEditor编辑器之图片上传

以前没有整合过编辑器,目前没事整合个编辑器玩下,基本编辑器中主要就是附件上传的地方需要特别的写点代码,其他的可以直接照搬,我整合的是wangEditor,这个编辑器比较清爽,如果需要繁多的功能可以选择Ueditor,那个是百度出的,但是界面太老了,wangEditor的官网地址是http://www.wangeditor.com/下面就直接上我的代码了前端代码{% include 'public/header.html' %}<div class="layui-warp"...

阅读全文

leaflet中文简明手册

leaflet使用手册,先记录下,以后用的上L.MapAPI各种类中的核心部分,用来在页面中创建地图并操纵地图。Constructor(构造器)通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象,其中文字对象是可选的。Options(选项)Map State Options(地图状态选项)centre(中心):初始化地图的地理中心。zoom(缩放):初始化地图的缩放。layers(图层):初始化后加载到地图上的图层。minZoom(最小视图):地图的最小视图。可以重写地图图层的最小视图。max...

阅读全文

使用leaflet为地图添加搜索标注并定位

在老外的网站找到了这个,自己修改了下,顺便记录下来,方便以后使用,这个用法在之前记录的leaflet基础上添加首先我们引入歪果仁写的js和css<link rel="stylesheet" href="{{ url_for('static',filename='leaflet/leaflet-search.css') }}"/><script src="{{ url_for('stat...

阅读全文

使用leaflet地图框架制作离线可视化地图

前一篇博客记录了使用folium配合openstreetmap地图瓦片展现地图并标注地图组件,这里介绍一篇使用leaflet的使用教程,达到的效果和之前一片博客差不多,具体可以查看博客内容:https://sulao.cn/post/701.html首先我们需要去https://leafletjs.com/download.html下载最新的leaflet文件,因为我是本地的离线地图,所以我们瓦片需要提前下载好,通过IIS提供瓦片图片的访问,因为后端用的flask对图片资源等代理不太好,所以用的IIS直接上我的示例代码:{% include&n...

阅读全文

layui模板引擎和其他模块兼容性问题的解决方法

使用layui来写前端一般效果功能让工作减轻了不少,但是在实际的开发中还是遇到了一些个问题,今天就遇到一个问题,本博客文只是用来记录和简单分析下这个问题我在同时使用模板引擎和其他模块遇到了其他模块失效的问题因为使用模板引擎以后如果将绑定元素的ID放在模板引擎中进行绑定会出现绑定不上的情况,所以我们在需要操作的dom上绑定的ID,这个dom最好写在html中而不是模板引擎中,例如我的代码<div class="layui-warp">    <div cl...

阅读全文

js查找字符串中包含某字符串的几种方式

在字符串中查找字符串好几种方式,下面我们来看看1.使用indexOf方法var str = "sulao";console.log(str.indexOf("su") != -1); //trueindexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回-12.使用search方法var str = "sulao";console.log(...

阅读全文

javascript使用canvas绘制矩形的方法

canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法绘制之前我们需要先创建一个canvas元素到网页<canvas id="draw" style="width: 640px; height:480px; border: 1px solid #EEE;"></canvas>然后我们绘制一个无填充的矩形...

阅读全文

layui使用第三方扩展插件的方法,附含下拉复选框插件

layui第三方扩展插件,现在也有一些比较好用的插件了,但是大家可能还没能了解怎么使用第三方扩展插件,今天这里给大家讲下如何使用第三方插件官方这里有说明https://www.layui.com/doc/base/modules.html,但是我们看的还是有点晕,需要一个实例来清醒下头脑layui.config({    base: '/static/js/'});layui.use(['form', 'multiSelect',&nb...

阅读全文

layui模板引擎laytpl模块的用法

layui的模板引擎可以将数据和模板进行分离,这样我们可以把逻辑放在view层,不用在js中写一大堆模板标签代码,模板引擎的默认分隔符是{{}},正好和我的flask模板分隔符冲突了,以下是我的代码{% include 'public/header.html' %}<div id="view"></div><script id="sur_detail" type="text/html"...

阅读全文