如何使用plotly js在y轴上为单个x轴值（可能是日期）绘制两个点

Posted 2023-02-18

【中文标题】如何使用plotly js在y轴上为单个x轴值（可能是日期）绘制两个点

【英文标题】：how to plot two points on y axis for single x axis value (Maybe date) using plotly js

【发布时间】：2021-10-12 01:54:05

【问题描述】：

我有如下所示的数据集。对于每个日期，我都会在 y 轴上绘制一个或多个点。

x axis (y axis) - 2021-07-01 (20, 30)
x axis (y axis) - 2021-07-02 (20)
x axis (y axis) - 2021-07-04 (10, 50)
x axis (y axis) - 2021-07-06 (40)

如何使用 Plotly js 绘制这些数据

【问题讨论】：

您能否为您的问题添加更多信息？变量是什么样的？你想要散点图吗？

是的。我需要这样plotly.com/javascript/line-charts 但应该能够为单个 x 值绘制 2 个点（在我的情况下，同一日期想要在 y 中绘制超过 1 个点）

【参考方案1】：

我从代码笔得到了答案。 我认为这对其他人也可能有用。 如果每个 x 值有两个 y 值，我们可以复制 x 值以匹配 y 值，如下所示。

var data = [
  
    x: ['2013-10-04', '2013-10-04', '2014-11-04'],
    y: [1, 3, 6],
    type: 'scatter'
  
];

Plotly.newPlot('myDiv', data);

【讨论】：

这不考虑每个 x 值的多个 y 值。我发布了解决该问题的答案

【参考方案2】：

如果每个 x 值都有一个或多个 y 值（例如以二维数组的形式），则可以循环遍历该数组以展平它，并从原始 x 重复必要的 x 值-值数组。代码笔是here。

var x = ["2021-07-01","2021-07-02","2021-07-04","2021-07-06"]
var y = [[20, 30],[20],[10,50],[40]]
var x_plot = []
var y_plot = []

for (let i=0; i<y.length; i++) 
  for (let j=0; j<y[i].length; j++) 
    x_plot.push(x[i])
    y_plot.push(y[i][j])
  

  
var trace1 = 
  x: x_plot,
  y: y_plot,
  type: 'scatter',
  mode: 'markers'


var data = [trace1];
Plotly.newPlot('myDiv', data);