Question

我目前正在尝试如何将图形显示到django模板中。通过将地块转换为图像，然后将其显示在模板中，我取得了一些成功。但是该方案不适用于诸如Plotly和Cufflinks的交互式图形。

如何将Plotly和袖扣嵌入到django模板中，以便图形可以交互？

Answer 1

plotly.offline.plot有一个选项output_type='div'，它使plot函数仅返回一个包含图谱html的div。

plotly.offline.plot(data, include_plotlyjs=False, output_type='div')

您可以将此div存储在变量中，并将其传递给模板。

下面是一个最小的工作示例。请注意，我们将plotly.js导入模板文件的标题中，并使用safe过滤器。

view.py

from django.views.generic import TemplateView
import plotly.offline as py
import plotly.graph_objs as go
import numpy as np


class IndexView(TemplateView):
    template_name = "plots/index.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['plot'] = examplePlot()
        return context


def examplePlot():
    # Makes a simple plotly plot, and returns html to be included in template.
    x = np.linspace(0, 12.56, 41)
    y = np.sin(x)
    y2 = np.sin(1.2*x)

    data = [
        go.Scatter(
            name = 'Sin(x)',
            x=x,
            y=y,
        ),

        go.Scatter(
            name = 'Sin(1.2x)',
            x=x,
            y=y2,
        ),
    ]

    layout = go.Layout(
        xaxis=dict(
            title='x'
        ),

        yaxis=dict(
            title='Value',
            hoverformat = '.2f'
        ),
    )

    fig = go.Figure(data=data, layout=layout)
    plot_div = py.plot(fig, include_plotlyjs=False, output_type='div')

    return plot_div

plots / index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Plotly test</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>
    {{plot|safe}}
  </body>
</html>

这是结果的屏幕截图，是交互式的。

Django中的密谋和袖扣

1 个答案: