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

Question

我有如下所示的数据集。对于每个日期，我在 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 绘制此数据

Answer 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);

Answer 2

如果每个 x 值都有一个或多个 y 值（比如以二维数组的形式），则可以遍历此数组以展平它，并从原始数组中重复必要的 x 值x 值数组。 codepen 是 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);

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

how to plot two points on y axis for single x axis value (Maybe date) using plotly js

javascript

graph

charts

plotly

plotly.js