HighCharts in voller Breite Ausgabe

Question

Ich versuche, mein gerendertes Diagramm 100% des übergeordneten Div ohne Erfolg zu füllen. Gibt es eine Möglichkeit, die Lücke auf der linken und rechten Seite zu entfernen?

http://jsfiddle.net/sKV9d/

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 
     } 
    }] 
}); 

Answer 1

Wenn Sie die Optionen width: 300, height: 200 wie folgt entfernen:

var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'chart', 
    margin: 0, 
    defaultSeriesType: 'areaspline' 
},  

... 

wird es automatisch um den Behälter füllen.

Answer 2

Try this:

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 
     } 
    }] 
}); 

Answer 3

Set minPadding und maxPadding auf 0, siehe: http://jsfiddle.net/sKV9d/3/

Answer 4

Ich löste es durch

window.dispatchEvent(new Event('resize')); 

UPD:

1. remov Die Attribute Breite und Höhe.
2. fügen in Css folgenden Code, um Block-Diagramm auf 100% des #container anzupassen:

Diagramm {Breite: 100%; Höhe: 100%; }

2a. eine andere Möglichkeit ist - im Falle, wenn nicht möglich, Behältergröße bei „Design“ Zeit definieren Sie Diagramm nach Diagramm Last umfließen kann (dh Aufruf chart.reflow();):

chart: { 

    events: { 
     load: function(event) { 
     **event.target.reflow();** 
     } 
    } 
}, 

Siehe Beispiel http://jsfiddle.net/yfjLce3o/

Answer 5

Wenn Sie dem Diagramm keine width-Eigenschaft zuweisen, sollte die Breite des Containers automatisch ermittelt werden. Also entfernen Sie einfach die Breite aus dem Diagramm und geben Sie den Container width: 100% und das sollte funktionieren.

Wenn Sie eine bestimmte Breite wünschen, ändern Sie einfach die Containerbreite 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; 
} 

Answer 6

Die Frage ist wegen jq sehr UI. Nachdem Sie Ihr Diagramm gerendert haben, rufen Sie diesen Code auf, um das Diagramm neu zu füllen. Diese feste mein Problem

chart.reflow();