前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在Flask中实现可视化?

如何在Flask中实现可视化?

作者头像
Python进击者
发布2021-05-31 15:21:05
1.5K0
发布2021-05-31 15:21:05
举报
文章被收录于专栏:JAVAandPython君

大家好,我是kuls。

今天这篇文章源于我最近接的一个小外包,里面需要用到一些web端的可视化。

其实很多朋友也希望自己能够在web端实现可视化,但是却不知道怎么下手。

今天来给大家说说

首先,我们web端想要去显示一些可视化的数据,我们肯定调用别人写好的库是最好的,有哪些呢?

首推charts.js这个库里面的图表也算是比较丰富的

https://chartjs.bootcss.com/

但是很多朋友不知道怎么调用,这你就得好好补习前端知识啦

这里给大家举个小案例,教大家如何去使用这些web端的可视化控件。

一般比较完整的开源控件都会有官方文档

我们先找到官方文档中的安装,然后我们找到相应的js文件进行下载

在这里我们找到CDNJS,cdn就不多说了,你可以简单理解为某个网站中存储了charts.js文件,我们只需要去引用。

进入页面有我们可以复制相应的代码,例如

代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.min.js" integrity="sha512-yadYcDSJyQExcKhjKSQOkBKy2BLDoW6WnnGXCAkCoRlpHGpYuVuBqGObf3g/TdB86sSbss1AOP4YlGSb6EKQPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

当然k哥在这里不是非常建议使用cdn的形式导入,因为有些时候cdn会挂掉,这会导致我们无法正常使用。

所以我们在项目中新建一个charts.js文件

然后访问js的地址,把里面的内容复制到我们创建的文件中。

然后我们在html中导入我们的charts.js文件

代码语言:javascript
复制
<script src="../static/plugins/chartjs/Chartv1.min.js"></script>

我们接着看文档中是如何使用的

其中文档给了我们这样一些代码:

代码语言:javascript
复制
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 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)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

也就是说我们html标签只需要写一个canvas即可,然后通过js来渲染数据。大致的思路搞清楚了,我们就来看看js中哪里是导入数据的。

代码语言:javascript
复制
datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3],

不难发现data正是数据源。这时我们回到后端flask。

我们只需要创建一个接口,然后在这个函数中对数据进行分析获取,然后通过list列表传给前端html即可。

因为Flask默认使用的是Jinja2的模板,所以我们可以通过下面的方式来在js中调用后端传入的数据。

代码语言:javascript
复制
....
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["积极", "中立", "消极"],
      datasets: [{
          label: '数据表',
          data: {{all_number | tojson}}, //注意这里
    :
    [
....

最终我们就可以在flask中实现可视化操作。

其实今天的文章如果了解前后端的朋友可能会觉得并不难,但是还是有很多的小伙伴会问到,所以也给大家总结了一下。

好了,今天的文章就到这啦,我们下期见。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Python进击者 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档