用于误差条的 plotly js 色阶

Posted

技术标签:

【中文标题】用于误差条的 plotly js 色阶【英文标题】:plotly js colorscale for errorbars 【发布时间】:2021-12-20 13:48:14 【问题描述】:

我想用色阶绘制分散的数据,并且误差条应该具有相同的色阶。

我找到了 plotly R (How do you make plotly error bars follow a colorscale?) 的答案,但我无法将其翻译成 js。同样使用name 属性对我来说似乎很奇怪。

这是一个最小的例子 (https://jsfiddle.net/ztqoemkd/1)

var trace1 = 
  type: 'scatter',
  mode: 'markers',
  y: [2, 1, 3],
  marker: 
    size: 20,
    color: [1, 2, 3],
    showscale: true
  ,
  error_y: 
     type:'data',
     array: [0.5, 0.7, 0.5],
     color: [1, 2, 3]
  


Plotly.newPlot('myDiv', [trace1])
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

【问题讨论】:

【参考方案1】:

我仍然不知道,是否可以与 plotly 本身一致地完成。 至少,我现在可以使用d3 开发这项工作:

// get colors from data points
rgbs = Plotly.d3.selectAll('.points .point').data().map(d => d.mcc)

// apply colors to errorbars
Plotly.d3.selectAll('.yerror').style('stroke', (d,i) => rgbs[i])

这是完整的演示:https://jsfiddle.net/vor6e9wj 输出是

注意 1:缩放后,误差条再次变黑。 注2:不适用于scattergl

编辑 1:要在缩放时保持颜色,可以将解决方法附加到 plotly_relayout(请参阅 https://jsfiddle.net/9s64y5cv)。

【讨论】:

以上是关于用于误差条的 plotly js 色阶的主要内容,如果未能解决你的问题,请参考以下文章

在plotly()中的色阶

将静态色阶设置为 Plotly Heatmap 动画

python plotly创建一个与最大值和最小值相关的色阶

R语言plotly可视化:plotly可视化在对比条形图中添加误差条散点图中添加误差条线图中添加误差条(Error Bars with plotly in R)

R语言plotly可视化:plotly可视化在散点图中添加误差条(Scatterplot with Error Bars with plotly in R)

R语言plotly可视化:plotly可视化在对比条形图中添加误差条(Bar Chart with Error Bars with plotly in R)