Ploty.jsグラフが反応しない

Plotly.jsを使ってスタック棒グラフを作成した後、別の画面幅に反応しないことに気付きました。自動的に画面の幅に合わせてサイズを変更するために、グラフをどのように反応させることができますか？Ploty.jsグラフが反応しない

私は、次を使用してみましたが、それはうまくいきませんでした：

だけに、xとy軸を設定し、その後、あなたのレイアウトにTrueに自動サイズ調整を設定し

window.onresize = function() { 
    Plotly.Plots.resize('myDiv'); 
};

var trace1 = { 
 
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'], 
 
    y: [20, 14, 23, 20, 14, 23, 34, 26], 
 
    marker: { 
 
     color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)'] 
 
    }, 
 
    name: 'Item 1', 
 
    type: 'bar' 
 
}; 
 

 
var trace2 = { 
 
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'], 
 
    y: [12, 18, 29, 12, 18, 29, 24, 22], 
 
    marker: { 
 
     color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)'] 
 
    }, 
 
    name: 'Item 2', 
 
    type: 'bar' 
 
}; 
 

 
var trace3 = { 
 
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'], 
 
    y: [12, 18, 29, 12, 18, 29, 24, 22], 
 
    marker: { 
 
     color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)'] 
 
    }, 
 
    name: 'Item 3', 
 
    type: 'bar' 
 
}; 
 

 
var data = [trace1, trace2, trace3]; 
 

 
var layout = { 
 
    barmode: 'stack' 
 
}; 
 

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

<head> 
 
    <!-- Plotly.js --> 
 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
</head> 
 
<body> 
 
    <div id="myDiv"></div> 
 
</body>

出典

2017-11-05 MacaronLover

relayoutメソッドを使用してオートレンジする。すなわち、これは私のために動作しません何らかの理由で

var trace1 = { 
 
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'], 
 
    y: [20, 14, 23, 20, 14, 23, 34, 26], 
 
    marker: { 
 
    color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)'] 
 
    }, 
 
    name: 'Item 1', 
 
    type: 'bar' 
 
}; 
 

 
var trace2 = { 
 
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'], 
 
    y: [12, 18, 29, 12, 18, 29, 24, 22], 
 
    marker: { 
 
    color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)'] 
 
    }, 
 
    name: 'Item 2', 
 
    type: 'bar' 
 
}; 
 

 
var trace3 = { 
 
    x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'], 
 
    y: [12, 18, 29, 12, 18, 29, 24, 22], 
 
    marker: { 
 
    color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)'] 
 
    }, 
 
    name: 'Item 3', 
 
    type: 'bar' 
 
}; 
 

 
var data = [trace1, trace2, trace3]; 
 

 
var layout = { 
 
    barmode: 'stack', 
 
    autosize: true // set autosize to rescale 
 
}; 
 

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

 
// update the layout to expand to the available size 
 
// when the window is resized 
 
window.onresize = function() { 
 
    Plotly.relayout('myDiv', { 
 
     'xaxis.autorange': true, 
 
     'yaxis.autorange': true 
 
    }); 
 
};

<head> 
 
    <!-- Plotly.js --> 
 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="myDiv"></div> 
 
</body>

出典

2017-11-05 03:28:29 Fraser

。サイズは同じです。 – MacaronLover

@MacaronLover - え？ [Run Code snippet] - > [full page]の順にクリックします。明らかに、グラフはページの全幅を埋めるようにサイズが変更されます。 – Fraser

完全に動作します。どうもありがとう。 – MacaronLover

Ploty.jsグラフが反応しない

答えて

関連する問題