文章/答案/技术大牛

发布

社区首页 >问答首页 >使用chart.js从django创建动态图表

问使用chart.js从django创建动态图表
EN

Stack Overflow用户

提问于 2021-12-13 15:17:10

回答 1查看 304关注 0票数 0

我对Django很陌生。我目前正在通过Twitter API对实时用户推特进行情绪分析。我已经做了分析，并表现出了这种情绪。现在，我想在我的Django应用程序(可能是条形图或饼形图)中使用图表来可视化情感，但我不知道如何实现。

我正在考虑使用chart.js来使其响应，但是大多数示例都使用静态数据，所以我没有成功地将从Twitter中提取的数据与Chart.js集成。

这是我网页的截图。这张桌子是提取出来的推文，上面写着他们相应的情绪。然而，条形图只是静态数据。我不知道怎么把它变成json。

我网页的截图

这是我的views.py

from django.http.response import JsonResponse
from django.shortcuts import render, redirect, HttpResponse
from .forms import Sentiment_Typed_Tweet_analyse_form
from .sentiment_analysis_code import sentiment_analysis_code
from .forms import Sentiment_Imported_Tweet_analyse_form
from .tweepy_sentiment import Import_tweet_sentiment
from django.contrib.auth.decorators import login_required
from django.contrib import messages
      
def sentiment_analysis_import(request):
    if request.method == 'POST':
        form = Sentiment_Imported_Tweet_analyse_form(request.POST)
        tweet_text = Import_tweet_sentiment()
        analyse = sentiment_analysis_code()

        if form.is_valid():
            handle = form.cleaned_data['sentiment_imported_tweet']
            # messages.info(request, 'It might take a while to load the data.')

            if handle[0]!='#':
                list_of_tweets = tweet_text.get_hashtag(handle)
                list_of_tweets_and_sentiments = []
                for i in list_of_tweets:
            

    list_of_tweets_and_sentiments.append((i,analyse.get_tweet_sentiment(i)))
                args = {'list_of_tweets_and_sentiments':list_of_tweets_and_sentiments, 'handle':handle}
                return render(request, 'home/sentiment_import_result_hashtag.html', args)
            
            if handle[0]=='#':
                list_of_tweets = tweet_text.get_hashtag(handle)
                list_of_tweets_and_sentiments = []
                for i in list_of_tweets:
                    list_of_tweets_and_sentiments.append((i,analyse.get_tweet_sentiment(i)))
                args = {'list_of_tweets_and_sentiments':list_of_tweets_and_sentiments, 'handle':handle}
                return render(request, 'home/sentiment_import_result_hashtag.html', args)
            
    else:
        form = Sentiment_Imported_Tweet_analyse_form()
        return render(request, 'home/sentiment_import.html')

def get_data(request, *args, **kwargs):
def get_data(request, *args, **kwargs):
    sentiment_analysis_import(args)
    data = {
        args
    }
    return JsonResponse('home/sentiment_import_result_hashtag.html', data)

这是我的HTML

    <!DOCTYPE html>
<html lang="en">
{% load static %}
  <head>
    <title>Sentymeter: Import Tweets</title>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!--Chart js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <title>Import Tweets</title>

   <style>
     .tbl-header {
      border: 5px solid;
        background-color: #fff;
    }
     table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th{
  color: white;
  background: black;
}

tr:nth-child(even) {
  background-color: #e4e9e4;
}
tr:nth-child(odd) {
  background-color: #c2c2c2;
}

body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            background: #f8f2ce !important;
        }
    h7.white-text {
         color: rgb(255, 255, 255);
        }
    
</style>
   </style>
   </head>
   <body>

  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/sentiment/type">Input Text</a>
        </li>
              <li class="nav-item active">
                  <a class="nav-link" href="/sentiment/import">Import Tweets<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/feedback">Feedback</a>
              </li>
          </ul>
      </div>
      <span class="hello-msg"><strong>Hello, {{request.user}}</strong></span>&nbsp;&nbsp;&nbsp;
      <button class="btn btn-danger navbar-btn" ><a href="{% url 'user:logout' %}"><h7 class="white-text" color=white;>Logout</h7></a></button>
  </nav>


      <div class="container">
        <div class="row align-items-center ftco-vh-100">
          <div class="col-md-9">
            <h1 class="ftco-heading mb-3" >Import Tweets Result</h1>
            <h2 class="h5 ftco-subheading mb-5" ><strong>Keyword</strong> - {{ handle }}</h2>
      </div><div></div>   
      
      <div class = "container">
      
      <h1>test</h1>
    </div>
    <div class="col-sm-4">
    <canvas id="myChart" width="90" height="90"></canvas>

  {{ list_of_tweets_and_sentiments|json_script:"list_of_tweets_and_sentiments" }}
<!-- <script>
  const ctx = JSON.parse(document.getElementById('list_of_tweets_and_sentiments').textContent);
</script> -->


<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Positive', 'Neutral', 'Negative'] ,
        datasets: [{
            label: 'Sentiment Counts',
            data: [12, 19, 3],

            backgroundColor: [
                'green',
                'orange',
                'red',
            ],
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script></div>
 

<div class="tbl-header" >
    <table>
        <tr>
          <th >Tweet</th>
          <th>Sentiment</th>
          <th>Emotag</th>
        </tr>
      <tbody>
        {% for i,j in list_of_tweets_and_sentiments %}
        <tr>
          <td>{{i}}</td>
          <td>{{j}}</td>
          {% ifequal j 'Negative' %}
          <td><img src="{% static 'icons/negative.png' %}"></td>
          {% endifequal %}
          {% ifequal j 'Positive' %}
          <td><img src="{% static 'icons/positive.png' %}"></td>
          {% endifequal %}
          {% ifequal j 'Neutral' %}
          <td><img src="{% static 'icons/neutral.png' %}"></td>
          {% endifequal %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>


<h1>test</h1>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


  </body>
</html>

有人能帮我把我的情绪推特和图表联系起来吗？我现在很困惑，…

如果你需要其他文件/代码，请告诉我。

python

django

twitter

javascript

回答 1

Stack Overflow用户

发布于 2021-12-13 17:24:19

在大多数情况下，Chart.js (数组或api调用除外)都是JSON格式的。

如果使用Django，可以创建用于模板和数据数组的变量，例如：

Sentiment.filter(neutral=True).count() # return the number based on a specific filter

将其传递给变量并在数据数组中的模板中传递：

data: [{{neutral_sentiment}}, {{positive_sentiement}}, {{negative_sentiment}}],

包含用于生成图表的数字的->变量

在大多数情况下，如果您的数据并不复杂，并且不需要获取数千个查询，我就会这样做。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70336935

复制

相似问题

问使用chart.js从django创建动态图表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用chart.js从django创建动态图表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用chart.js从django创建动态图表
EN