Plotly绘图中标记颜色与线条颜色不一致的原因及统一方法

问题描述 #

编写了如下Plotly散点图代码：

fig = go.Figure()
x_for_plot = np.array([1,2,3,4])
y_for_plot = np.array([1,2,3,4])
colors=np.array([0.1, 0.2, 0.5, 0.7])
fig.add_trace(go.Scatter(
  x=x_for_plot,
  y=y_for_plot,
  name="TEST",
  marker=dict(
    size=15,
    cmax=1,
    cmin=0,
    color=colors,
    colorscale="Rainbow_r",
    symbol='circle',
    line=dict(color=colors, width=3)
  ),
  showlegend=True,
  hoverinfo='text',
  hovertext="text",
  hoverlabel=dict(bgcolor="white", font_color="black"),
  mode='markers'))
fig.show()

运行后发现标记填充颜色与标记边框颜色不一致，如何解决该问题？

原因分析 #

• 标记的color参数配合colorscale、cmin、cmax使用时，会将数值映射到指定的颜色刻度上生成对应颜色；
• 标记边框的line.color直接传入数值数组时，Plotly会将数值当作RGB/RGBA的通道值（0-1范围）解析，不会使用colorscale进行映射，二者的颜色解析逻辑不同，导致颜色不一致。

解决方法 #

需要手动将数值数组通过colorscale映射为对应的颜色值，再赋值给line.color，以下两种方法均可实现：

方法1：使用Plotly内置工具函数 #

import plotly.colors as pc
import numpy as np
import plotly.graph_objects as go

fig = go.Figure()
x_for_plot = np.array([1,2,3,4])
y_for_plot = np.array([1,2,3,4])
colors=np.array([0.1, 0.2, 0.5, 0.7])
cmax=1
cmin=0
colorscale="Rainbow_r"

# 将数值归一化后映射为对应颜色
normalized_colors = (colors - cmin) / (cmax - cmin)
line_colors = pc.colorscale_to_colors(colorscale, normalized_colors)

fig.add_trace(go.Scatter(
  x=x_for_plot,
  y=y_for_plot,
  name="TEST",
  marker=dict(
    size=15,
    cmax=cmax,
    cmin=cmin,
    color=colors,
    colorscale=colorscale,
    symbol='circle',
    line=dict(color=line_colors, width=3)
  ),
  showlegend=True,
  hoverinfo='text',
  hovertext="text",
  hoverlabel=dict(bgcolor="white", font_color="black"),
  mode='markers'))
fig.show()

方法2：直接传入颜色字符串数组 #

如果已经明确知道colors对应的颜色字符串，可直接将字符串数组传入color和line.color：

import numpy as np
import plotly.graph_objects as go

fig = go.Figure()
x_for_plot = np.array([1,2,3,4])
y_for_plot = np.array([1,2,3,4])
# 直接使用对应颜色字符串
colors = ["#ff0000", "#ff7f00", "#ffff00", "#00ff00"]

fig.add_trace(go.Scatter(
  x=x_for_plot,
  y=y_for_plot,
  name="TEST",
  marker=dict(
    size=15,
    color=colors,
    symbol='circle',
    line=dict(color=colors, width=3)
  ),
  showlegend=True,
  hoverinfo='text',
  hovertext="text",
  hoverlabel=dict(bgcolor="white", font_color="black"),
  mode='markers'))
fig.show()

以上两种方法都能保证标记填充色与边框颜色完全一致。

内容的提问来源于stack exchange，提问作者ShaiMar