首页 > 解决方案 > 离线 Plotly 模板 - 有可能吗?

问题描述

我正在使用 Python Plotly 图表库从我的 Python-Django Web 应用程序构建图表并将它们注入到模板中,如下所示:

看法:

from django.shortcuts import render
from plotly.offline import plot
from plotly.graph_objs import Scatter

def index(request):
    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', name='test',
                        opacity=0.8, marker_color='green')],
               output_type='div')
    return render(request, "index.html", context={'plot_div': plot_div})

模板:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
</head>
<body>
  {% autoescape off %}
  {{ plot_div }}
  {% endautoescape %}
</body>
</html>

这些代码行生成一个简单的散点图并将其显示给客户端模板,现在我想使用不同的主题模板,如文档(HERE)中所述,Plotly 有很多默认模板准备好-使用,但我不知道如何在我的离线图表视图渲染器中使用它们。如何plotly_white在我的图表中使用模板?

标签: pythonplotly

解决方案


好的,所以在尝试了多种方式之后,我找到了解决方案。

基本上,我们需要:

  • 构建坐标区对象
  • template使用定义轴字典和要使用的模板的对象创建布局
  • 创建图形对象,其中包含带有轴的图形和自定义布局
  • 将图表绘制到 div 容器

这是我使用的代码片段:

import numpy as np
import plotly.graph_objs as go
from plotly.offline import plot



def plot1d():
    x_data = np.arange(0, 120, 0.1)
    trace1 = go.Scatter(
        x=x_data,
        y=np.sin(x_data),
    )
    trace2 = go.Scatter(
        x=x_data,
        y=np.cos(x_data),
    )

    data = [trace1, trace2]
    layout = go.Layout(
        # autosize=False,
        # width=900,
        # height=500,
        template='plotly_dark',
        xaxis=dict(
            autorange=True
        ),
        yaxis=dict(
            autorange=True
        )
    )
    fig = go.Figure(data=data, layout=layout)
    plot_div = plot(fig, output_type='div', include_plotlyjs=False)
    return plot_div

这里是最终结果:

图表结果


推荐阅读