整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者： 俊欣
来源：关于数据分析与可视化
今天小编来为大家安利另外一个用于绘制可视化图表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基础之上，在创建之出的目的是为了帮助前端知识匮乏的数据分析人员，以纯Python编程的方式快速制作出交互特性强的数据可视化大屏，在经过多年的迭代发展，如今不仅仅可以用来开发在线数据可视化作品，即便是轻量级的数据仪表盘、BI应用甚至是博客或者是常规的网站都随处可见Dash框架的影子，今天小编就先来介绍一下该框架的一些基础知识，并且来制作一个简单的数据可视化大屏。
我们先来了解一下Dash框架中的两个基本概念
Layout顾名思义就是用来设计可视化大屏的外观和布局，添加一些例如下拉框、单选框、复选框、输入框、文本框、滑动条等组件，其中Dash框架对HTML标签也进行了进一步的封装，使得我们直接可以通过Python代码来生成和设计每一个网页所需要的元素，例如
<div>
<h1>Hello World!!</h1>
<div>
<p>Dash converts Python classes into HTML</p>
</div>
</div>
我们转化成Dash的Python结构就是
html.Div([
html.H1('Hello Dash'),
html.Div([
html.P('Dash converts Python classes into HTML'),
])
])
Callbacks也就是回调函数，基本上是以装饰器的形式来体现的，实现前后端异步通信的交互，例如我们在点击按钮或者下拉框之后出现的功能就是通过回调函数来实现的。
在导入模块之前，我们先用pip命令来进行安装，
! pip install dash
! pip install dash-html-components
! pip install dash-core-components
! pip install plotly
然后我们导入这些刚刚安装完的模块，其中dash-html-components用来生成HTML标签，dash-core-components模块用来生成例如下拉框、输入框等组件，这里我们还需要用到plotly模块，因为我们需要用到的数据来自该模块，里面是一众互联网公司过去一段时间中股价的走势
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px
那么我们读取数据并且用plotly来绘制折线图，代码如下
app = dash.Dash() #实例化Dash
df = px.data.stocks() #读取股票数据
def stock_prices():
# 绘制折线图
fig = go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
line=dict(color='firebrick', width=4), name='Apple')
])
fig.update_layout(title='股价随着时间的变幻',
xaxis_title='日期',
yaxis_title='价格'
)
return fig
app.layout = html.Div(id='parent', children=[
html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
'marginTop': 40, 'marginBottom': 40}),
dcc.Graph(id='line_plot', figure=stock_prices())
])
if __name__ == '__main__':
app.run_server()
我们点击运行之后会按照提示将url复制到浏览器当中便可以看到出来的结果了，如下所示
从代码的逻辑上来看，我们通过Dash框架中的Div方法来进行页面的布局，其中有参数id来指定网页中的元素，以及style参数来进行样式的设计，最后我们将会指出来的图表放在dcc.Graph()函数当中。
然后我们再添置一个下拉框，当我们点击这个下拉框的时候，可是根据我们的选择展示不同公司的股价，代码如下
dcc.Dropdown(id='dropdown',
options=[
{'label': '谷歌', 'value': 'GOOG'},
{'label': '苹果', 'value': 'AAPL'},
{'label': '亚马逊', 'value': 'AMZN'},
],
value='GOOG'),
output
options参数中的label对应的是下拉框中的各个标签，而value对应的是DataFrame当中的列名
df.head()
output
最后我们将下拉框和绘制折线图的函数给连接起来，我们点击下拉框选中不同的选项的时候，折线图也会相应的产生变化，
@app.callback(Output(component_id='bar_plot', component_property='figure'),
[Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
print(dropdown_value)
# Function for creating line chart showing Google stock prices over time
fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
line=dict(color='firebrick', width=4))
])
fig.update_layout(title='股价随着时间的变幻',
xaxis_title='日期',
yaxis_title='价格'
)
return fig
我们看到callback()方法中指定输入和输出的媒介，其中Input参数，里面的component_id对应的是下拉框的id也就是dropdown，而Output参数，当中的component_id对应的是折线图的id也就是bar_plot，我们来看一下最后出来的结果如下
最后，全部的代码如下所示
亮有特色的 CSS 组件库，组件代码非常简洁，也支持深度定制主题、定制组件，可以搭配 Vue / React 等框架使用。
daisyUI 是一款极为流行的 CSS UI 组件库，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架构建的组件库。截止发文日期，已经在 Github 得到 11,200 Star， 944,600 次 NPM 安装。
daisyui 官网
Tailwind CSS 是一个功能类优先的 CSS 框架，通过类似于 .flex、.pt-4、.text-center、.rotate-90 这种原子类组合的 class 名快速构建网站，在 HTML 代码上就能完成开发，不需要再自己想各种 CSS 命名。
daisyUI 作为 Tailwind CSS 的组件库，不仅继承了它的优点，而且代码更简洁，主题非常漂亮有特点，打开官网就喜欢上它了。
daisyui 组件
支持搭配使用的框架
首先说说我最喜欢的主题，daisyUI 提供了 29 款主题，配色很舒服，各有特色，我首先想到用来做个人网站的主题，一定会很酷。
daisyui 默认主题
daisyui 暗主题
需要注意的是，使用 daisyUI 前，需要和 Tailwind CSS 一起安装，最简单的方式是 cdn 引入：
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>生产环境更推荐用 npm 的方式，这样打包出来的项目会小很多：
安装 daisyUI
npm i daisyui然后，在你的tailwind.config.js文件里追加 daisyUI 的设置
module.exports = {
//...
plugins: [require("daisyui")],
}使用过 Tailwind CSS 的开发者一定对这种写一堆 class 名来构建组件的方式印象很深刻，我一直没有推荐 Tailwind CSS，就是因为个人实在不喜欢零零碎碎的 CSS 类名，我更倾向于写语义清晰的类名来开发组件。我们来看看实现一个常规的按钮，两种写法的区别：
<!-- Tailwind CSS 的写法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold
text-cente text-white uppercase transition
duration-200 ease-in-out bg-indigo-600
rounded-md cursor-pointer
hover:bg-indigo-700">Button</a>
<!-- daisyUI 的写法 -->
<a class="btn btn-primary">Button</a>daisyUI 的写法实在太简洁了，所以说 daisyUI 简直是“反” Tailwind CSS 思路一点也不为过，不过 Tailwind CSS 的作者认为语义化的 CSS 并不好维护，因为随着项目的迭代，很多 class 名早已失去了原有的意义了。各位前端小伙伴，你们觉得呢？
45 个组件如果没法满足，官方还提供了自定义组件的工具类，开发者可以快速构建自定义组件。官网提供了详尽的中文文档，纯 CSS 本身也易懂，对应的组件也有 HTML 代码例子，上手使用完全不是问题。
daisyui 开发文档
总的来说，这是一款漂亮、流行，代码简洁的 web UI 组件库，熟悉以后能提高开发效率，不妨写个快速 demo 尝试一下。
daisyUI 是基于 Tailwind CSS 构建的 CSS 组件库，源码基于 MIT 开源协议托管在 Github 上，任何个人和公司都可以免费下载使用，也可以用于商业项目。
和 daisyUI 类似的框架还有之前推荐过的 Bootstrap 和 Pico.css，感兴趣的开发者也可以前往了解。
关注我，持续分享高质量的免费开源、免费商用的资源。
↓↓点【了解更多】查看本次分享的网址。
又到周五了，是时候该放个大招了。哈哈~~
提到 CSS 想必每个做前端开发的没有不知道的，也没有不会用的。即使是后端开发人员也多少会一点，因为这是Web开发中最最基础的一个知识了。
但是在平时写 css的时候，很多人又觉得他没点技术含量而且还会占用大量的时间去编写代码。虽然现在出现了很多很香的框架如: bootstrap 。还有一些css预处理器如：sass、less、stylus 都是为了解决在平时开发中的一些问题，提高工作效率。
今天给大家介绍一款新的比较火的前端 CSS 框架： Tailwind CSS
先把官网奉上：
https://www.tailwindcss.cn/
先来感受两个官网图片：
Tailwindcss 有很多种安装方式，也可以和不同的框架进行集成，这里以 vue3(vite) 为例介绍。
1、创建一个vite 工程，具体用法参考 vite 官网
npx create-vite-app my-project
cd my-project
npm install2、初始化 Tailwind CSS
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^93、创建您的配置文件，(这里会同时生成tailwind.config.js 和 postcss.config.js 文件)
npx tailwindcss init -p// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}4、引入 tailwindcss
创建一个 css文件，这里创建位置是： /src/index.css
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;5、引入创建好的 index.css在 main.js 或者 main.ts 中引入刚刚创建好的css文件
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
关于更多的安装细节请仔细阅读官网文档
https://www.tailwindcss.cn/docs/installation
看一个例子
要实现这样一个样式设计，用传统的方式css如下
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>用 tailwindcss写法如下：
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>可以看到代码量是少了很多很多。
tailwindcss的强大功能远不止如此，还有很多强大好用的功能如：
tailwindcss的功能实在是太多，这里也只是简单介绍几个常用的功能而已，如果你对这个框架感兴趣请到官网仔细阅读用法。
Vue-admin-work 系列的 P 版本。也应用到了 tailwindcss 框架。如果你对 vue-admin-work 框架感兴趣。请到评论区查看源码获取的方式。
欢迎大家评论点赞转发~~~ 感谢支持
*请认真填写需求信息，我们会在24小时内与您取得联系。
