如何在 Django 上使用 Plotly 创建图表?
How to create charts with Plotly on Django?
我正在尝试创建一个仪表板,我可以在其中使用库 plotly.
分析模型的数据(文章)
我的模板上没有显示 Plotly 条形图,我想知道我是否做错了什么,因为下面的代码没有错误:
models.py
from django.db import models
from django.contrib.auth.models import User
import plotly.plotly as py
import plotly.graph_objs as go
class Article(models.Model):
user = models.ForeignKey(User, default='1')
titre = models.CharField(max_length=100, unique=True)
slug = models.SlugField(max_length=40)
likes = models.ManyToManyField(User, related_name="likes")
def __str__(self):
return self.titre
@property
def article_chart(self):
data = [
go.Bar(
x=[self.titre], #title of the article
y=[self.likes.count()] #number of likes on an article
)
]
plot_url = py.plot(data, filename='basic-bar')
return plot_url
dashboard.html
<div>{{ article.article_chart }}</div>
为什么条形图不可见?有什么建议吗?
结果
py.plot(data, filename='basic-bar')
是生成一个离线HTML文件和return这个文件的本地URL
例如file:///your_project_pwd/temp-plot.html
如果你想在Django框架中渲染它,你需要
- 使用
<iframe>
并在 Django 设置中重组文件夹
或
- 使用 plotly.offline 方法根据您的输入生成 HTML 代码
data
有一个我试过的例子:
figure_or_data = [Scatter(x=[1, 2, 3], y=[3, 1, 6])]
plot_html = plot_html, plotdivid, width, height = _plot_html(
figure_or_data, True, 'test', True,
'100%', '100%')
resize_script = ''
if width == '100%' or height == '100%':
resize_script = (
''
'<script type="text/javascript">'
'window.removeEventListener("resize");'
'window.addEventListener("resize", function(){{'
'Plotly.Plots.resize(document.getElementById("{id}"));}});'
'</script>'
).format(id=plotdivid)
html = ''.join([
plot_html,
resize_script])
return render(request, 'dashboard.html', {'html': html,})
上面的答案非常有用,我实际上正在观察 parent 调整大小,我正在 angular 工作并且我使用下面的代码来实现调整大小,我有一个类似的问题,这行代码很有用
<div class="col-lg-12" ng-if="showME" style="padding:0px">
<div id="graphPlot" ng-bind-html="myHTML"></div>
</div>
图表将通过变量 myHTML 插入
我所做的只是观察 parent 调整大小并使用 jquery 单独获得 div id 并将其传递给 plotly 并且它起作用了。
$scope.$on("angular-resizable.resizeEnd", function (event, args){
Plotly.Plots.resize(document.getElementById($('#graphPlot').children().eq(0).attr("id")));
});
我正在尝试创建一个仪表板,我可以在其中使用库 plotly.
分析模型的数据(文章)我的模板上没有显示 Plotly 条形图,我想知道我是否做错了什么,因为下面的代码没有错误:
models.py
from django.db import models
from django.contrib.auth.models import User
import plotly.plotly as py
import plotly.graph_objs as go
class Article(models.Model):
user = models.ForeignKey(User, default='1')
titre = models.CharField(max_length=100, unique=True)
slug = models.SlugField(max_length=40)
likes = models.ManyToManyField(User, related_name="likes")
def __str__(self):
return self.titre
@property
def article_chart(self):
data = [
go.Bar(
x=[self.titre], #title of the article
y=[self.likes.count()] #number of likes on an article
)
]
plot_url = py.plot(data, filename='basic-bar')
return plot_url
dashboard.html
<div>{{ article.article_chart }}</div>
为什么条形图不可见?有什么建议吗?
结果
py.plot(data, filename='basic-bar')
是生成一个离线HTML文件和return这个文件的本地URL
例如file:///your_project_pwd/temp-plot.html
如果你想在Django框架中渲染它,你需要
- 使用
<iframe>
并在 Django 设置中重组文件夹
或
- 使用 plotly.offline 方法根据您的输入生成 HTML 代码
data
有一个我试过的例子:
figure_or_data = [Scatter(x=[1, 2, 3], y=[3, 1, 6])]
plot_html = plot_html, plotdivid, width, height = _plot_html(
figure_or_data, True, 'test', True,
'100%', '100%')
resize_script = ''
if width == '100%' or height == '100%':
resize_script = (
''
'<script type="text/javascript">'
'window.removeEventListener("resize");'
'window.addEventListener("resize", function(){{'
'Plotly.Plots.resize(document.getElementById("{id}"));}});'
'</script>'
).format(id=plotdivid)
html = ''.join([
plot_html,
resize_script])
return render(request, 'dashboard.html', {'html': html,})
上面的答案非常有用,我实际上正在观察 parent 调整大小,我正在 angular 工作并且我使用下面的代码来实现调整大小,我有一个类似的问题,这行代码很有用
<div class="col-lg-12" ng-if="showME" style="padding:0px">
<div id="graphPlot" ng-bind-html="myHTML"></div>
</div>
图表将通过变量 myHTML 插入
我所做的只是观察 parent 调整大小并使用 jquery 单独获得 div id 并将其传递给 plotly 并且它起作用了。
$scope.$on("angular-resizable.resizeEnd", function (event, args){
Plotly.Plots.resize(document.getElementById($('#graphPlot').children().eq(0).attr("id")));
});