Javascript 如何在plotly.js中为方框图设置固定的分类范围_Javascript_Plotly_Boxplot

Javascript 如何在plotly.js中为方框图设置固定的分类范围

javascript

Javascript 如何在plotly.js中为方框图设置固定的分类范围,javascript,plotly,boxplot,Javascript,Plotly,Boxplot,我目前正试图在plotly.js中为分类方框图设置一个固定范围，以便即使某些轨迹没有数据，也始终具有相同的图形大小和布局如果你从一个DOC的例子来看这个，“大卫·韦斯特”的踪迹仍然会出现，因为它在中间，但是右边的“德玛尔·德罗赞”是看不到的，因为它在末尾，并且图的大小是用数据极值来计算的。在plotly.js中是否可以为长方体打印设置固定的分类轴 HTML: <head>  <script src="https://cdn.p

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

如果你从一个DOC的例子来看这个，“大卫·韦斯特”的踪迹仍然会出现，因为它在中间，但是右边的“德玛尔·德罗赞”是看不到的，因为它在末尾，并且图的大小是用数据极值来计算的。在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代码在这里*/

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);

var xData=['Carmelo
Anthony'、'Dwyane
Wade'，
“德隆
威廉姆斯”，“布鲁克
洛佩兹”，
“达米安
利拉德”，“大卫
韦斯特”，
“布莱克
格里芬”，“大卫
李”，
“Demar
Derozan”]；
函数getrandom（num，mul）
{
var值=[]
对于（i=0；i，您可以在布局对象中向xaxis添加一个固定范围
xaxis:{range: [-1,9]}

要采用更具动态性的方式，您可以使用不同数据量，因此，如果您的数据量较少（例如，前3名而不是前9名），则该方式是动态的：
我已将其添加到您的代码笔中：
希望有帮助：-）
xaxis:{range: [-1,data.length]}