Plotly.js

本文介绍了Plotly.js-在plotly中反转水平条形图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是新手，正在制作条形图示例.我想做的是使条形图从右向左运行.这是我的jsfiddle的链接.

jsfiddle/ksaluja/w0cx3sw1/1/

当前，它是从右到左的默认方式.谢谢！

index.html

<div id="tester" style="width:600px;height:250px;"></div>

scripts.js

var data = [{ type: 'bar', x: [20, 14, 23], y: ['giraffes', 'orangutans', 'monkeys'], orientation: 'h' }]; Plotly.newPlot('tester', data);

解决方案

您需要在layout对象中使用xaxis的autorange: reversed属性.

请参考以下示例.

JSFiddle演示

JS:

var data = [{ type: 'bar', x: [20, 14, 23], y: ['giraffes', 'orangutans', 'monkeys'], orientation: 'h' }]; var layout = { xaxis:{ autorange:'reversed' }, yaxis:{ side:'right' } } Plotly.newPlot('tester', data, layout);

参考:

轴向反转轴

自动绘制范围

>

I am new to plotly and am working of a bar chart example. What I want to do is have the bar chart run from right to left. Here is a link to my jsfiddle.

jsfiddle/ksaluja/w0cx3sw1/1/

Currently it is going the default way from right to left. Thanks!

index.html

<div id="tester" style="width:600px;height:250px;"></div>

scripts.js

var data = [{ type: 'bar', x: [20, 14, 23], y: ['giraffes', 'orangutans', 'monkeys'], orientation: 'h' }]; Plotly.newPlot('tester', data);

解决方案

You need to use the autorange: reversed property of xaxis in layout object.

Refer the below example.

JSFiddle Demo

JS:

var data = [{ type: 'bar', x: [20, 14, 23], y: ['giraffes', 'orangutans', 'monkeys'], orientation: 'h' }]; var layout = { xaxis:{ autorange:'reversed' }, yaxis:{ side:'right' } } Plotly.newPlot('tester', data, layout);

References:

Plotly reversed axis

Plotly Autorange