Question

我目前正在尝试在plotly.js中为分类箱形图设置固定范围，以便即使某些跟踪没有数据也始终具有相同的图形大小和布局。

如果您根据文档示例查看此CodePen，那么＆＃34; David West＆＃34;痕迹仍然出现，因为它位于中间，但是＆＃34; Demar Derozan＆＃34;在右边没有看到，因为它在最后，图形大小是用数据极值计算的。

在plotly.js中是否可以为箱形图设置固定的分类轴？

HTML：

<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <!-- Plotly chart will be drawn inside this DIV -->
    <div id="myDiv"></div>
    <script>
        /* JAVASCRIPT CODE GOES HERE */
    </script>
 </body>

使用Javascript：

var xData = ['Carmelo<br>Anthony', 'Dwyane<br>Wade',
      'Deron<br>Williams', 'Brook<br>Lopez',
      'Damian<br>Lillard', 'David<br>West',
      'Blake<br>Griffin', 'David<br>Lee',
      'Demar<br>Derozan'];
function getrandom(num , mul) 
{
   var value = [ ]  
    for(i=0;i<=num;i++)
   {
     rand=Math.random() * mul;
    value.push(rand);
    }
    return value
}
var yData = [
   getrandom(30 ,10),
   getrandom(30, 20),
   getrandom(30, 25),
   getrandom(30, 40),
   getrandom(30, 45),
   getrandom(30, NaN),
   getrandom(30, 20),
   getrandom(30, 15),
   getrandom(30, NaN)
];

var colors = ['rgba(93, 164, 214, 0.5)', 'rgba(255, 144, 14, 0.5)', 'rgba(44, 160, 101, 0.5)', 'rgba(255, 65, 54, 0.5)', 'rgba(207, 114, 255, 0.5)', 'rgba(127, 96, 0, 0.5)', 'rgba(255, 140, 184, 0.5)', 'rgba(79, 90, 117, 0.5)', 'rgba(222, 223, 0, 0.5)'];

var data = [];

for ( var i = 0; i < xData.length; i ++ ) {
  var result = {
    type: 'box',
    y: yData[i],
    name: xData[i],
    boxpoints: 'all',
    jitter: 0.5,
    whiskerwidth: 0.2,
    fillcolor: 'cls',
    marker: {
      size: 2
    },
    line: {
      width: 1
    }
  };
  data.push(result);
};

layout = {
    title: 'Points Scored by the Top 9 Scoring NBA Players in 2012',
    yaxis: {
        autorange: true,
        showgrid: true,
        zeroline: true,
        dtick: 5,
        gridcolor: 'rgb(255, 255, 255)',
        gridwidth: 1,
        zerolinecolor: 'rgb(255, 255, 255)',
        zerolinewidth: 2
    },
    margin: {
        l: 40,
        r: 30,
        b: 80,
        t: 100
    },
    paper_bgcolor: 'rgb(243, 243, 243)',
    plot_bgcolor: 'rgb(243, 243, 243)',
    showlegend: false
};

Plotly.newPlot('myDiv', data, layout);

Answer 1

您可以在布局对象中为xaxis添加固定范围。

xaxis:{range: [-1,9]}

要采用更加动态的方式，您可以使用不同数据的数量，因此如果您拥有的数据较少，则会动态显示（例如前三名而不是前九名）：

xaxis:{range: [-1,data.length]}

我已将其添加到您的codepen：http://codepen.io/anon/pen/MbppBN

希望它有所帮助： - ）

如何在plotly.js中为箱形图设置固定的分类范围

1 个答案: