Как создать графики с Plotly на Django?

Я пытаюсь создать панель мониторинга, где я могу анализировать данные моей модели (статья) с помощью библиотеки 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

панель управления.HTML-код

<div>{{ article.article_chart }}</div>

почему гистограмма не видна? Есть предложения ?

10
django plotly python

2 ответов

результат

py.plot(data, filename='basic-bar')

для создания автономного HTML-файла и возврата локального URL-адреса этого файла

например, файл: / / / your_project_pwd / temp-plot.HTML-код

если вы хотите отобразить его в Django framework, вам нужно

  • использовать <iframe> и реструктуризация вашей папки в настройках Django

или

  • использовать plotly.автономный метод для генерации 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,})
10

приведенный выше ответ был очень полезен, я на самом деле наблюдаю за родительским изменением размера, я работаю в angular, и я использовал приведенный ниже код для достижения изменения размера, у меня аналогичная проблема, и эта строка кода была полезна

<div class="col-lg-12" ng-if="showME" style="padding:0px">
   <div id="graphPlot" ng-bind-html="myHTML"></div>
</div>

график будет вставлен через переменную myHTML

все, что я сделал, это наблюдал за родительским изменением размера и получил идентификатор div только с помощью jquery и передал его plotly, и он работал.

$scope.$on("angular-resizable.resizeEnd", function (event, args){
        console.log(document.getElementById($('#graphPlot').children().eq(0).attr("id")));
        Plotly.Plots.resize(document.getElementById($('#graphPlot').children().eq(0).attr("id")));
});
0