Plot.js Grafik reagiert nicht

Nachdem ich Plotly.js verwendet habe, um ein Stapel-Balkendiagramm zu erstellen, habe ich festgestellt, dass es nicht auf unterschiedliche Bildschirmbreiten reagiert. Wie kann der Graph auf die Größe angepasst werden, die automatisch an die Bildschirmbreite angepasst wird?Plot.js Grafik reagiert nicht

Ich habe versucht, die folgende verwenden, aber es hat nicht funktioniert:

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>

Quelle

2017-11-05 MacaronLover

Gerade gesetzt Autosize auf True in Ihrem Layout, legen Sie dann die x- und y-Achse Autorange über die Relayout-Methode.

heißt

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>

Quelle

2017-11-05 03:28:29 Fraser

Aus irgendeinem Grund dies nicht für mich arbeiten. Größe bleibt gleich. – MacaronLover

@MacaronLover - wie? Klicken Sie auf Code-Snippet ausführen -> dann auf die ganze Seite. Die Größe des Diagramms passt sich eindeutig an die gesamte Seitenbreite an ... – Fraser

Funktioniert jetzt perfekt. Danke vielmals. – MacaronLover

Plot.js Grafik reagiert nicht

Antwort

Verwandte Themen