如何在Flask中实现可视化？-阿里云开发者社区

如何在Flask中实现可视化？

2022-02-18 272

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如何在Flask中实现可视化？

大家好，我是kuls。

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

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

今天来给大家说说

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

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

https://chartjs.bootcss.com/

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

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

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

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

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

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

<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文件

<script src="../static/plugins/chartjs/Chartv1.min.js"></script>

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

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

<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中哪里是导入数据的。

datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3],

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

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

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

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