使用 plotly javascript 库控制不同轨迹的特定 x 轴范围的图例

Posted 2023-02-18

【中文标题】使用 plotly javascript 库控制不同轨迹的特定 x 轴范围的图例

【英文标题】：Control legend for particular range of x axis for different traces using plotly javascript library

【发布时间】：2021-09-17 20:37:49

【问题描述】：

我想同时控制特定范围内不同轨迹的图例，比如 x=0 到 x=5。我们该怎么做？

var trace1 = 
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
  type: 'scatter'
;
var trace2 = 
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
  type: 'scatter'
;
var trace3 = 
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [5, 7, 3, 2, 8, 6, 1, 9, 3],
  type: 'scatter'
;

var data = [trace1, trace2, trace3];
var layout = showlegend: true,
    legend: "orientation": "h";
 
Plotly.newPlot('myDiv', data, layout);

例如，当我们单击图例时，应隐藏被包围的部分。

示例代码：Codepen_Sample

更新 2：如果 trace(curve) 由一组不同的子迹线定义，这些子迹线要控制的图例范围不同但所有曲线的迹线[名称]都相同。例如，这是伪代码：

for(let i=0; i<5; i++)
    initialise trace1;
    trace2;
    trace3;

【问题讨论】：

这个是python还是js？

脚本是javascript。

那么也许我们可以删除python标签？

已删除。我添加了 python 标记，因为 plotly python 模块是 plotly.js 库的同义词。

【参考方案1】：

您可以将三个跟踪中的每一个都分解为起始段和结束段，然后为起始段分配相同的name、相同的legendgroup，并使用showlegend 属性在图例中仅显示其中一个。

由于 plotly.js 将默认为每个跟踪设置新颜色，因此您可能希望使每个跟踪的开始和结束段具有相同的颜色。修复 xaxis 范围将避免在切换图例条目时调整整个绘图的大小。

这里是 javascript 和 codepen sample:

var trace1_start = 
  x: [0, 1, 2, 3, 4, 5],
  y: [0, 3, 6, 4, 5, 2],
  type: 'scatter',
  marker: color: 'orange',
  name: 'start',
  showlegend: true,
  legendgroup: 'start'
;
var trace1_end = 
  x: [5, 6, 7, 8],
  y: [2, 3, 5, 4],
  type: 'scatter',
  marker: color: 'orange',
  name: 'trace1',
;
var trace2_start = 
  x: [0, 1, 2, 3, 4, 5],
  y: [0, 4, 7, 8, 3, 6],
  marker: color: 'steelblue',
  type: 'scatter',
  name: 'start',
  showlegend: false,
  legendgroup: 'start'
;
var trace2_end = 
  x: [5, 6, 7, 8],
  y: [6, 3, 3, 4],
  type: 'scatter',
  marker: color: 'steelblue'
;
var trace3_start = 
  x: [0, 1, 2, 3, 4, 5],
  y: [5, 7, 3, 2, 8, 6],
  type: 'scatter',
  marker: color: 'forestgreen',
  name: 'start',
  showlegend: false,
  legendgroup: 'start'
;
var trace3_end = 
  x: [5, 6, 7, 8],
  y: [6, 1, 9, 3],
  type: 'scatter',
  marker: color: 'forestgreen'
;

var data = [trace1_start, trace1_end, trace2_start, trace2_end, trace3_start, trace3_end];
var layout = showlegend: true,
    legend: "orientation": "h", xaxis: "range": [0,8];
 
Plotly.newPlot('myDiv', data, layout);

【讨论】：

感谢@Derek，这真的很有帮助。还有另一种情况，如果有不同范围的跟踪，如果每个循环，trace1.name 相同，如何控制它们？让我们说 for(let i=0; i

我也在问题中添加了这个查询。