plotly.jsのボックスプロットの固定範囲カテゴリを持つ方法

私は現在、plotly.jsのカテゴリボックスプロットの固定範囲を設定しようとしています。トレースがあっても常に同じグラフサイズとレイアウトを持つようにしていますデータがありません。plotly.jsのボックスプロットの固定範囲カテゴリを持つ方法

ドキュメントの例に基づいてこのCodePenを見ると、「David West」のトレースは途中に表示されますが、右側の「Demar Derozan」は最後に表示されていませんグラフのサイズはデータの臨界値で計算されます。

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

出典

2016-11-21 Astael

あなたは、レイアウトオブジェクトにあなたのx軸に固定された範囲を追加することができます。

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

あなたがより少ないデータを持っている場合（例：トップ3の代わりに9を上）そのダイナミックなので、あなたは、さまざまなデータの量を使用することができ、より動的な方法を持っている：

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

私はそれを追加あなたのcodepen：http://codepen.io/anon/pen/MbppBN

が、それは、:-)

出典

2016-11-21 13:29:41 flipperweid

Yeaaayハックのための多くのおかげで役に立てば幸い！それはうまく動作します:) – Astael

plotly.jsのボックスプロットの固定範囲カテゴリを持つ方法

答えて

関連する問題