實作動態使用div的全部高度/寬度的Plotly JS方法
P粉012875927
P粉012875927 2023-08-25 19:48:49
0
1
485

點擊頂部按鈕時,容器#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; }
 點這裡改大小 
Hello world

P粉012875927
P粉012875927

全部回覆 (1)
P粉046878197

要讓Plotly自動佔用容器的所有可用空間,您可以在佈局物件中使用 'autosize' 選項。

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 }] };
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!