水平绘制一个简单的曲线图

Question

使用条形图，您可以将orientation: h添加到跟踪中。

无法通过折线图找到一种方法，所以像这样的基本图形：

可以旋转看起来像这样（在gimp中旋转......）：

Answer 1

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

通过将rotate和transform应用于图表本身，您可以获得所需的结果。

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>