问题：
使用chart.js从django创建动态图表
越高峻
我刚到姜戈。我目前正在通过推特应用编程接口对实时用户推文进行情感分析。我已经设法做了分析和表达情感。现在，我想在我的Django应用程序中使用图表（也许是条形图或饼图）来可视化情感，但我不确定如何实现。
我在考虑使用图表。js使其具有响应性，但大多数示例都使用静态数据，因此我没有成功地将从Twitter API提取的数据与图表集成。js。
这是我的网页截图。这张表格是摘录的推特及其相应的情感。然而，条形图只是静态数据。我不知道如何将其转换为json。
我的网页截图
这是我的视图。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个答案
封瑞
在大多数情况下，都是图表。js，但数组或JSON格式的api调用除外。
如果你使用的是Django，你可以在模板和数据数组中创建变量，例如：
Sentiment.filter(neutral=True).count() # return the number based on a specific filter
将其传递给变量并在数据数组中的模板中：
data: [{{neutral_sentiment}}, {{positive_sentiement}}, {{negative_sentiment}}],
-
在大多数情况下，如果您的数据不复杂，并且您没有获取数千个查询，那么我会这样做。
类似资料：
-
我正在尝试使用图表创建多行图表。js 我可以使用固定的数据结构对1行和2行执行此操作，但我无法使用多行来显示传递给数据结构的数据。 下面是从图表中缩写出来的示例用法。js网站 http://www.chartjs.org/docs/#getting-started 现在我的代码， 图表始终显示相同的最后生成的行4次。 我是javascript新手，我确信我在创建对象结构时犯了一些错误，我花了一天的
-
我创建了一个json文件使用python这是一个列表。每个子列表都有chart.js图表的数据，即对于x和y轴，具有和。 这是包含列表和子列表的json。 下面的代码创建了一个图表，但我希望遍历所有条目，并为每个子列表（图表的多个实例）创建图表。 如何循环遍历下面代码中列出的json文件并创建多个chart.js图表？i、 e.，等的图表。
-
主要内容：简单的视图视图功能，或简称"view"，是一个简单的Python函数，它接受一个Web请求，并返回一个Web响应。此响应可以是 Web页的HTML内容，或重定向，或404错误，或XML文档，或图像/片等。例如：使用视图创建页面，请注意需要将一个视图关联到一个URL，并把它看作一个网页。 在Django中，视图必须在应用程序的 views.py 文件中创建。 简单的视图 我们将在 myapp 创建一个简单的视
-
当我尝试使用ListView从firebase检索数据时，我遇到了无限运行，我不知道该如何解决它。 这是我的java代码 这是我的xml代码
-
问题内容： 我试图找到有关此信息，但空手而归： 我认为可以使用反射或代理在Java中动态创建类，但我不知道如何做。我正在实现一个简单的数据库框架，在其中使用反射创建SQL查询。该方法获取具有数据库字段作为参数的对象，并基于该对象创建查询。但是，如果我还可以动态创建对象本身，那将非常有用，这样我就不必为每个表都拥有一个简单的数据包装对象。 动态类只需要简单的字段（，，），例如 这可能吗，我该怎么做？
-
因为类也是对象，所以我们可以在程序运行的时候创建类。 Python 是动态语言。 动态语言和静态语言最大的不同，就是函数和类的定义，不是编译时定义的，而是运行时动态创建的。 在之前，我们先了了解下 type() 函数。 首先我们新建一个 hello.py 的模块，然后定义一个 Hello 的 class ， class Hello(object): def hello(self, name