Plotly.js-在plotly中反转水平条形图 [英] Plotly.js - Reversing the horizontal bar chart in plotly

问题描述

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

https://jsfiddle.net/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);

参考:

1. 轴向反转轴

2. 自动绘制范围

>

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.

https://jsfiddle.net/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:

1. Plotly reversed axis

2. Plotly Autorange

这篇关于Plotly.js-在plotly中反转水平条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！