使用 chart.js 從 django 創建動態圖表
[英]Creating a dynamic chart from django using chart.js
問題描述
我是 Django 的新手。 我目前正在通過 Twitter API 對實時用戶推文進行情緒分析。 我已經設法進行分析並顯示情緒。 現在，我想使用我的 Django 應用程序（可能是條形圖或餅圖）中的圖表來可視化情緒，但我不確定如何。
I was thinking of using Chart.js to make it responsive but most of the examples are using static data so I wasn't successful in integrating my data where I extracted from Twitter API with chart.js.
這是我的 web 頁面的截圖。 該表是提取的推文及其相應的情緒。 然而，條形圖只是 static 數據。 我不知道如何將其轉換為 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>
<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>
誰能幫助我如何將我的情緒推文與圖表聯系起來？ 我現在很困惑……
如果您需要其他文件/代碼，請告訴我。
1 個解決方案
解決方案1
0 2021-12-13 17:24:19
在大多數情況下 Chart.js 除了數組或 JSON 格式的 api 調用。
如果您使用 Django 您可以創建要在模板和數據數組中使用的變量，例如：
Sentiment.filter(neutral=True).count() # return the number based on a specific filter
將其傳遞給變量並在數據數組中的模板中：
data: [{{neutral_sentiment}}, {{positive_sentiement}}, {{negative_sentiment}}],
-> 包含用於生成圖表的數字的變量
在大多數情況下，我會這樣做，如果您的數據並不復雜並且您沒有獲取數千個查詢，它會很好地工作。
如何在Django中使用用戶過濾的數據庫中的數據生成氣泡圖（Chart.js）？
[英]How to generate bubble chart (Chart.js) using data from database FILTERED by user in Django?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.