Gibt es eine einfache Möglichkeit, ein jqplot-Diagramm bei der Größenanpassung des Browsers automatisch zu skalieren? Ich habe auf Google gesucht und nichts gefunden.jqplot resize chart beim Ändern der Größe des Browsers
13
A
Antwort
25
Größenänderung jqplots wird here diskutiert.
es funktioniert, wenn der Browser der Größe verändert wird, binden die Replot Funktion mit dem window.resize Ereignis up:
$(window).resize(function() {
plot1.replot({ resetAxes: true });
});
Laufcode:
$(document).ready(function(){
var plot1 = $.jqplot ('container', [[3,7,9,1,4,6,8,2,5]], {});
$(window).resize(function() {
plot1.replot({ resetAxes: true });
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<div id="container"></div>
5
I habe festgestellt, dass die Verwendung von Replot nicht immer konsistente Ergebnisse liefert, wenn Sie viele Optionen in Ihren Graphen haben. Die einzige Art, wie ich gefunden habe, dass komplexe Graphen mit Fenstergrößen zurechtkommen, ist, brutal zu werden und es zu zerstören und neu aufzubauen.
function() {
var plot;
var renderGraph = function() {
plot = $.jqplot('chartId', yourChartData, yourChartOptions);
}
renderGraph();
var resizeGraph = function() {
if (plot)
plot.destroy();
renderGraph();
}
$(window).resize(function() {
resizeGraph();
});
}
Ja, das sollte +1 tun. In meiner resize Methode füge ich auch den folgenden Code hinzu - kurz bevor ich 'replot()' nenne. Auf diese Weise stelle ich sicher, dass die 'barWidth' ebenfalls neu skaliert wird. '$ .each (plot.series, Funktion (Index, Serie) { series.barWidth = undefined; }); ' – Boro
[Beispiel zeigt das Problem.] (Http://jsfiddle.net/RNPxQ/22/) [Beispiel zeigt die Lösung.] (Http://jsfiddle.net/RNPxQ/21/) – Boro
Sehr cool @Boro, Ich muss mich daran erinnern. – Mark