Plotly Dash - 渐变线答案

【问题标题】：Plotly Dash - Gradient LinesPlotly Dash - 渐变线
【发布时间】：2020-04-28 19:04:19
【问题描述】：

是否可以使用 Plotly Dash 创建线条颜色为渐变的折线图（纯粹是为了美观）？

我尝试使用类似的东西：

'line': {'color': 'linear-gradient(90deg, red, red 60%, white)' }

plotly dash 中的整个图形代码示例：

dcc.Graph(
    id='MORTGAGE_RATES',
    figure={
        'data': [
             { "x": MORTGAGE30US['date'],"y": MORTGAGE30US['value'],"mode": "lines","name": '30 YR', 'line': {'color': 'linear-gradient(90deg, red, red 60%, white)' }},
             { "x": MORTGAGE15US['date'],"y": MORTGAGE15US['value'],"mode": "lines","name": '15 YR',},
        ],
        'layout': {
            'title': 'MORTGAGE RATES',
            "paper_bgcolor": "rgb(46, 54, 65)",
            "plot_bgcolor": "rgb(46, 54, 65)",
            'font': {
                'color': "rgb(255,255,255)"
            }
        }
    }
)

【问题讨论】：

您介意制作mcve 吗？特别是您的数据样本？
那么为了更好地理解：您是否正在为您的生产线寻找颜色图？
我只是想让我的图表的线条从一种颜色变为另一种颜色 - 例如蓝色到绿色（逐渐）。不找色图，这纯粹是为了美观。
所以颜色将取决于 x 而不是 y？
技术上是的

标签： python plotly plotly-dash

【解决方案1】：

此功能尚不适用于 2D 线图，目前仅可用于 3D 线图，请参阅https://github.com/plotly/plotly.js/issues/581。但是，如果您使用标记而不是线条，则可以在 2D 绘图中使用色标，请参见下面的示例。

import plotly.graph_objects as go
import numpy as np

t = np.linspace(0, 10, 1000)
x, y = t, np.cos(t)

data = go.Scatter(x=x, y=y, mode='markers', marker={'color': x, 'colorscale': 'Rainbow', 'size': 10})

layout = dict(plot_bgcolor='white', margin=dict(t=0, b=0, r=0, l=0, pad=0),
              xaxis=dict(showgrid=False, zeroline=False, mirror=True, linecolor='gray'),
              yaxis=dict(showgrid=False, zeroline=False, mirror=True, linecolor='gray'))

fig = go.Figure(data=data, layout=layout)

fig.show()

【讨论】：

这太棒了！你知道如何把它变成 Plotly Dash 吗？当我复制并粘贴您的代码时，它不显示。
我需要查看应用程序的完整代码，以找出图形未呈现的原因。
我想通了，对于那些以后有同样问题的人，你在你的dash应用程序中输入以下内容：dcc.Graph(figure=fig),
当你没有连接标记之间的所有点时，任何连接标记的方法 - 我只是得到间隔的渐变点......
您可以使用mode='markers+lines'，但正如我的回答中所解释的那样，该行不会跟随色阶，目前色阶只能应用于标记。