Plotly + Python：在 Django 模板中自定义 Plotly 图形的最简单选项答案

【问题标题】：Plotly + Python: Easiest option to customize a Plotly graph in a Django templatePlotly + Python：在 Django 模板中自定义 Plotly 图形的最简单选项
【发布时间】：2023-01-17 08:08:17
【问题描述】：

我想在 Django 页面上显示几个 Plotly 图表。我已经有了包含要包含在图表中的数据的 Python 列表。

我找到了一个有效的代码，但显然它是旧的或奇怪的（我看到的所有其他 Plotly 代码 sn-ps 都非常不同）而且我无法真正自定义它（尝试使用“官方”代码中的行/概念sn-ps 不适用于这个旧的/奇怪的代码）。

对我有用的代码是：

from plotly.offline import plot
from plotly.graph_objs import Scatter


plot_scatter = plot([Scatter(x=x_data, y=y_data,
                        mode='lines', name='test',
                        opacity=0.8, marker_color='green')],
               output_type='div')

context = {
    'plot_scatter' : plot_scatter,
    OTHER STUFF
    }
    return render(request, 'hello/graphs.html', context)

这行得通，但是后来我想减少边距，例如，我找到了诸如 https://plotly.com/python/setting-graph-size/ 之类的示例，其中代码与“我的”非常不同，我无法适应它（也许有办法，但我尝试了不同的方法选项没有任何运气）。

并且 Plotly 的默认代码（例如 https://plotly.com/python/figure-structure/）并非设计用于 Django 内部，我也不知道如何使其适应 Django。

我仍在学习 Python，所以也许我缺少一个明显的解决方案。

任何提示、想法或链接将不胜感激。谢谢！

【问题讨论】：

标签： python django plotly plotly-python

【解决方案1】：

如果您想在一个 Django 页面上显示多个 Plotly 图表，您可以在 Django 应用程序的 views.py 文件中使用以下代码

def plot1():
    x_data = [0,1,2,3]
    y_data = [x**2 for x in x_data]
    plot_div = plot([Scatter(x=x_data, y=y_data,
                        mode='lines+markers', name='test',
                        opacity=0.8, marker_color='green',)],
               output_type='div')
    return plot_div

def plot2():
    random_x = [100, 2000, 550]
    names = ['A', 'B', 'C']
    fig = px.pie(values=random_x, names=names)
    fig.update_layout(margin=dict(l=20, r=20, t=20, b=20), paper_bgcolor="LightSteelBlue")
    plot_div2 = plot(fig, output_type='div')
    return plot_div2

def index(request):
    plots = [
        plot1(),
        plot2(),
    ]
    return render(request, "hello/graphs.html", context={"plots": plots})

在第二个情节中，我有意将情节声明为无花果，然后使用 fig.update 进一步定制（在我测试时对我来说工作得很好）

在您的 hello/graphs.html 页面中，您可以使用 for 循环显示每个图，这样您就可以在 Django 的单个页面上显示多个图

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  {% autoescape off %}
  {% for plot in plots %}
    {{plot}}
    
    {% endfor %}
  {% endautoescape %}
</body>

图形大小应该使用 Plotly 自定义，但是您可能还需要仔细检查 hello/graphs.html 文件中的 content="width=device-width, initial-scale=1">。

【讨论】：