Ich versuche, dass mein gerendertes Diagramm 100% des übergeordneten div ohne Erfolg ausfüllt. Gibt es eine Möglichkeit, die Lücke auf der linken und rechten Seite zu entfernen?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: 300,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
Wenn Sie die Optionen width: 300, height: 200
wie folgt entfernen:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
defaultSeriesType: 'areaspline'
},
...
der Behälter wird automatisch gefüllt.
Das Problem liegt an der Jquery-Benutzeroberfläche. Rufen Sie nach dem Rendern Ihres Diagramms diesen Code auf, um das Diagramm neu zu fließen. Das hat mein Problem behoben
chart.reflow();
Setzen Sie minPadding
und maxPadding
auf 0, siehe: http://jsfiddle.net/sKV9d/3/
Ich habe es durch gelöst
window.dispatchEvent(new Event('resize'));
UPD:
2a. Eine andere Möglichkeit ist - falls es nicht möglich ist, die Containergröße während der "Entwurfszeit" zu definieren, können Sie das Diagramm nach dem Laden des Diagramms umfließen (d. h. rufen Sie chart.reflow () auf.):
chart: {
events: {
load: function(event) {
**event.target.reflow();**
}
}
},
Siehe Beispiel http://jsfiddle.net/yfjLce3o/
Versuche dies :
var height= $("#container").height();
var width= $("#container").width();
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: width,
height: height,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
Das Problem mit Highcharts wurde bereits gemeldet hier . Um damit fertig zu werden, können wir etwas tun, wie oben erwähnt. Ich hatte auch das gleiche Problem, also habe ich es mit gelöst
window.dispatchEvent(new Event('resize'));
nach dem Rendern meines Diagramms wie folgt:
this.chartData={
... //some required data object to render chart
}
Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
window.dispatchEvent(new Event('resize'));
Wenn Sie dem Diagramm keine width
-Eigenschaft zur Verfügung stellen, sollte es automatisch die Breite des Containers erhalten. Entfernen Sie also einfach die Breite aus dem Diagramm und geben Sie dem Container width: 100%
.
Wenn Sie eine bestimmte Breite wünschen, ändern Sie einfach die Breite des Containers auf eine bestimmte Größe. Das Diagramm sollte immer noch 100% dieser Größe sein. JSFiddle
Beispiel:
HTML
<div id="container">
<div id="chart"></div>
</div>
JS
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
CSS
#container {
width: 100%;
height: 200px;
}
einfach nur CSS hinzufügen
.highcharts-container{
width: 100% !important;
}
.highcharts-root{
width: 100% !important;
}
verwenden Sie die updateChart-Funktion und rufen Sie chart.reflow () in dieser Funktion auf
scope.updatechart = function(){
scope.chart.reflow();
}
aufruf der updatechart-Methode alle 30 Sekunden mit einem beliebigen Aktualisierungsmechanismus