[英]Draw a simple plotly line graph horizontally
As far as I know there is no direct of doing so but you can take advantage of Plotly using D3 and the fact that all graphs are SVGs. 据我所知,这样做并没有直接意义,但是您可以利用D3来利用Plotly,并且所有图形都是SVG。
By applying rotate
and transform
to the plot itself you get the desired result. 通过对图形本身进行
rotate
和transform
,可以得到所需的结果。
Plotly.d3.selectAll(".subplot").filter(".xy").attr('transform', 'rotate(90) translate(0, -400)');
The class of the plot is "subplot xy"
and 400 is the width of your plot (specified in the HTML definition of your div). 绘图的类是
"subplot xy"
而400是绘图的宽度(在div的HTML定义中指定)。
If you want to rotate the whole graph use: 如果要旋转整个图形,请使用:
Plotly.d3.selectAll(".main-svg").attr('transform', 'rotate(90) translate(0, -400)');
Probably the legend needs to be adjusted a bit afterwards: 图例可能需要稍后进行调整:
Plotly.d3.selectAll(".legend").attr('transform', 'translate(100, 50)');
I'd recommend disabling
the hoverinfo or modify it as well. 我建议
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.