[英]How to make Plotly JS dynamically use the full height / width of a div, without hardcoding pixel dimensions?
單擊頂部按鈕時,容器#myDiv
的大小會發生變化。 如何使 Plotly 自動占用容器的所有可用大小,而沒有任何明顯的延遲?
這里有一些高延遲:
var z = [], steps = [], i; for (i = 0; i < 500; i++) z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100))); for (i = 0; i < 100; i++) steps.push({ label: i, method: 'restyle', args: ['line.color', 'red']}); var data = [{z: z, colorscale: 'YlGnBu', type: 'heatmap'}]; var layout = {title: '', sliders: [{ pad: {t: 5}, len: 1, x: 0, currentvalue: {xanchor: 'right', prefix: 'i: ', font: {color: '#888', size: 20}}, steps: steps }]}; Plotly.newPlot('myDiv', data, layout); document.getElementById('button').onclick = () => { document.getElementById('myDiv').classList.toggle('size2'); Plotly.Plots.resize('myDiv'); }
#button { background-color: gray; } #myDiv { width: 500px; height: 300px; border: 2px solid black; }.size2 { width: 300px;important: height; 200px !important; }
<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <span id="button">Click here to change the size</span> <div id="myDiv"></div> <div id="text">Hello world</div>
要使 Plotly 自動占用容器的所有可用大小,您可以在布局 object 中使用“自動調整大小”選項。
var layout = {
title: '',
autosize: true,
sliders: [{
pad: {t: 5},
len: 1,
x: 0,
currentvalue: {
xanchor: 'right',
prefix: 'i: ',
font: {
color: '#888',
size: 20
}
},
steps: steps
}]
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.