数据可视化网页制作

最新推荐文章于 2024-07-04 16:04:39 发布

看什么看o(｀ω´*)o

最新推荐文章于 2024-07-04 16:04:39 发布

阅读量3.5k

点赞数 5

分类专栏：网页水太深文章标签： python flask javascript html

本文链接：https://blog.csdn.net/weixin_45443751/article/details/124126132

版权

网页水太深专栏收录该内容

2 篇文章 0 订阅

订阅专栏

python数据可视化上传至网页

老师布置任务，要将数据情感分析进行数据可视化。功能如下：
1.群体情绪排行榜
2.群体情绪中国地图
3.集群密度排行
4.某一事件或视听节目讨论中，一个饼图显示用户行为占比包括点赞、评论、转发
5:显示某一事件或节目，随着时间变化的正、中、负向群体情绪的走势图。
预计界面：

开始制作

1.FLASK

之前没有接触过flask，现在仍然对其五窍开四窍-一窍不通，在经过粗浅的学习后，觉得应付我的简单网页够了。

（1）.flask框架安装

很简单，我实在python的File-setting-Project-Project Interpreter里面直接添加到环境里。

（2）注意：pycharm社区版本新建工程里面没有flask框架，需要自己新建：

1）新建一个工程，导入flask库
2）配置项目文件，在根目录新建文件夹，命名为static，将文件夹里面的__init.py__文件删除，同理创建templates文件夹。目录如图所示：
在这里插入图片描述
static文件夹里面主要放 css、JavaScript、image 等静态资源文件，templates文件夹里面放html文件。

（3）主要函数

flask好像是按顺序运行函数，render_template作用就是渲染模板即html文件，参数包括要渲染的html网页和传递的参数，参数名称可以随便写。
每个函数上面的@app.route就是flask路由，即网页的路径，app.run默认网址是127.0.0.1，若路由为app.rout(‘/’)则打开的网址就是127.0.0.1若路由为app.rout(‘/density’)，则打开的网址就是127.0.0.1/density。
我目前就很简单的用到这两个函数，当然flask还有许多其他有用的，但是我没用到。代码如下：

from flask import Flask, render_template, request
from 做图 import *

# from divide import *

app = Flask(__name__)


@app.route('/')
def base():
    file_name1 = f'E:\\爬虫任务\\3月任务\\task3\\帖子综合群体情绪.csv'
    file_name2 = f'E:\\爬虫任务\\3月任务\\task3\\宏观集群密度.csv'
    path_p, path_n, title_p, title_n = group_emotion(file_name1)
    path_d, title_d, den = cluster_density(file_name2)
    return render_template('base.html', path_p=path_p, path_n=path_n, title_p=title_p, title_n=title_n, path_d=path_d, title_d=title_d, den=den)


@app.route('/groupEmotoin')
def emotion1():
    file_name = f'E:\\爬虫任务\\3月任务\\task3\\帖子综合群体情绪.csv'
    try:
        path_p, path_n, title_p, title_n = group_emotion(file_name)
        return render_template('1.html', path_p=path_p, path_n=path_n, title_p=title_p, title_n=title_n)
    except:
        return render_template('1.html', message='inputs false!!!')


@app.route('/density')
def density():
    file_name = f'E:\\爬虫任务\\3月任务\\task3\\宏观集群密度.csv'
    try:
        path_d, title_d, den = cluster_density(file_name)
        return render_template('2.html', path_d=path_d, title_d=title_d, den=den)
    except:
        return render_template('2.html', message='input false!!!')


if __name__ == '__main__':
    app.debug = True
    app.run()

2.HTML文件

html怎么布局我现在也没怎么搞清楚，直接找到一个我觉得差不多的网页网页：菜鸟教程然后右键检查copy其html代码和css，勉强做了一个网页的标题和目录出来：
在这里插入图片描述
通过点击不同目录出现不同的数据结果，主页代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}" type="text/javascript"></script>
<!--    <link rel="canonical" href="http://127.0.0.1:5000/1.html">-->
    <link href="favicon.ico" rel="shortcut icon">
    <title>舆情分析</title>
</head>
<body>
    <!---------头部---------->
    <div class="header logo">
        <h1 class="word" >群体情绪分析</h1>
    </div>
    <!---------导航栏---------->
    <div class="header color">
        <div class="row">
            <div class="col nav">
                <ul id="menu">
                    <li><a href="/groupEmotoin">群体情绪排行榜</a></li>
                    <li><button>群体情绪中国地图</button></li>
                    <li><a href="javascript:playImage({{ title_d }}, {{ den }})">集群密度排行</a></li>
                    <li><button >饼图</button></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="main"></div>
</body>

<footer>
</footer>

</html>

注意：html对于传递过来的参数使用{{ parameter }}来表示。

对于实现点击目录显示不同内容这一功能，经过摸索出了两种方法：

（1）访问另外一个html网页

如群体情绪排行榜所示，href=“/groupEmotion”，点击群体情绪排行榜，网页会跳转到127.0.0.1/groupEmotion路径，在flask中我们设置此路径网页会渲染1.html，由此网页内容整体发生改变，保持网页上半部分不变则看不出来，但耗时较长。1.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
<!--    <link rel="canonical" href="http://127.0.0.1:5000/1.html">-->
    <link href="favicon.ico" rel="shortcut icon">
    <title>群体情绪</title>
</head>
<body>
    <!---------头部---------->
    <div class="header logo">
        <h1 class="word" >群体情绪分析</h1>
    </div>
    <!---------导航栏---------->
    <div class="header color">
        <div class="row">
            <div class="col nav">
                <ul id="menu">
                    <li><a href="/groupEmotoin">群体情绪排行榜</a></li>
                    <li><a >群体情绪中国地图</a></li>
                    <li><a href="javascript:playImage({{ title_d }}, {{ den }})">集群密度排行</a></li>
                    <li><a >饼图</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="left">
            <p id="tb" class="expand title"></p>
        </div>
        <div class="right">
            <div class="subguide">
                <ul id="submenu">
                    <li class="qua"><button onclick="getImage('{{ path_p }}', {{ title_p }})">正向</button></li>
                    <li class="qua"><button onclick="getImage('{{ path_n }}', {{ title_n }})">负向</button></li>
                    <li class="qua"><button>下载</button></li>
                </ul>
            </div>
            <div id="img1">
                <img id="ep" src="{{ url_for('static', filename='blank.png')}}" width="500" height="500" />
            </div>
        </div>

    </div>
</body>

<footer>
    <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</footer>

</html>

网页效果：
在这里插入图片描述

（2）访问JavaScript函数，直接对本网页进行渲染

<li><a href="javascript:playImage({{ title_d }}, {{ den }})">集群密度排行</a></li>

上面代码调用scripts函数，在

中插入我们想要显示的内容，此处采用echarts插件绘制图像，js函数如下：

function playImage( title_d , den )
    {
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            grid:{
                    top:48,
                    left:500,// 调整这个属性
                    right:50,
                    bottom:50,
                },
            tooltip: {},
            legend: {
                data:[{
                    name:'集群密度',
                    // 设置文本为红色
                    textStyle: {
                        color: 'green'}
                    }]
            },
            yAxis: {
                triggerEvent: true,
                data: title_d,
                axisLabel:{
                    show:true,
                    formatter:function(title_d){
                                    var texts=title_d;
                                    if(texts.length>15){ // 具体多少字就看自己了
                                    texts=texts.substr(0,30)+'...';
                                    }
                                    return texts;
                            }
                    }

            },
            xAxis: {},
            series: [{
                name: '集群密度',
                type: 'bar',
                data: den}]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        extension(myChart);
        function extension(myChart) {
            //判断是否创建过div框,如果创建过就不再创建了
            var id = document.getElementById("extension");
            if(!id) {
                 var div = "<div id = 'extension' sytle=\"display:none\"></div>";
                 $('#main').append(div);
                }
            myChart.on('mouseover', function(params) {
                 if(params.componentType == "yAxis") {
                     $('#extension').css({
                         "position": "absolute",
                         "color": "black",
                         //"border":"solid 2px white",
                         "font-family": "Arial",
                         "font-size": "1em",
                         "padding": "5px",
                         "display": "inline"
                     }).text(params.value);
                     $("#main").mousemove(function(event) {
                         var xx = event.pageX - 30;
                         var yy = event.pageY + 20;
                         $('#extension').css('top', yy).css('left', xx);
                     });
                 }
            });
            myChart.on('mouseout', function(params) {
                if(params.componentType == "yAxis") {
                    $('#extension').css('display', 'none');
                }
            });
        };
    }

页面效果：
在这里插入图片描述

3.JavaScript

JavaScript作用就是对网页进行操作，首先在html头部声明js：

<link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">

我在js文件中存放各种函数用于对网络页面进行操作，
js使用document.getElementById(‘ep’)来寻找html中的元素，并对其操作。上述方法一中用到的js函数如下：

function getImage( path, title )
    {
        str="";
        element1 = document.getElementById('ep');
        element2 = document.getElementById('tb');
        element1.src= path;
        str += '<p class="word">群体情绪节目排行</p>'
        for (var i=0;i< title.length;i++)
            {
                str += '<p title="' + title[i] + '">'
                str += i + ': ' + title[i];
                str += '</p>'
            }
        element2.innerHTML = str;
    }

看什么看o(｀ω´*)o

关注

5
点赞
踩
49

收藏

觉得还不错? 一键收藏
1
评论
数据可视化网页制作

python数据可视化上传至网页老师布置任务，要将数据情感分析进行数据可视化。功能如下：1.群体情绪排行榜2.群体情绪中国地图3.集群密度排行4.某一事件或视听节目讨论中，一个饼图显示用户行为占比包括点赞、评论、转发5:显示某一事件或节目，随着时间变化的正、中、负向群体情绪的走势图。预计界面：开始制作1.FLASK之前没有接触过flask，现在仍然对其五窍开四窍-一窍不通，在经过粗浅的学习后，觉得应付我的简单网页够了。（1）.flask框架安装很简单，我实在pyth
复制链接

扫一扫