javascript - 水平绘制简单的plotly折线图

Question

对于条形图，您可以将 orientation: h 添加到轨迹中。

找不到用折线图做到这一点的方法，所以像这样的基本图:

可以旋转成这样(在 gimp 中旋转...):

Answer 1

据我所知，没有直接的方法可以这样做，但您可以利用 Plotly 使用 D3 以及所有图形都是 SVG 的事实。

申请rotate并将 transform 转换为 plot 本身，您将获得所需的结果。

Plotly.d3.selectAll(".subplot").filter(".xy").attr('transform', 'rotate(90) translate(0, -400)');

绘图的类别是 "subplot xy"，400 是绘图的宽度(在 div 的 HTML 定义中指定)。

---

如果你想旋转整个图表使用:

Plotly.d3.selectAll(".main-svg").attr('transform', 'rotate(90) translate(0, -400)');

可能图例之后需要稍微调整一下:

Plotly.d3.selectAll(".legend").attr('transform', 'translate(100, 50)');

我推荐 disabling hoverinfo 或修改它。

var layout = {hovermode: false};
Plotly.newPlot('myDiv', data, layout);

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

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

//rotation happens here
Plotly.d3.selectAll(".subplot").filter(".xy").attr('transform', 'rotate(90) translate(0, -400)');

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 400px; height: 400px;"></div>

---