2016-04-20 7 views
0

Ich arbeite in einem Projekt, und ich versuche, einige Charts zu erstellen, ich benutze HighCharts jQuery-Bibliothek, ich teile die Diagramme oder Grafiken in Zeilen> colunms> Container. Auf den HighCharts jQuery-Bibliothek Demos, setzen sie die Charts in einem div Breite Inline-Stil, wie folgt aus:Chart Width keine render ok

<div id="container1" style="width: 310px; max-width: 800px; 
height: 400px; margin: 0 auto"></div> 

Mein Problem ist, dass, wenn das Diagramm haben es immer eine Breite von 310px, die keine mater geladen widt von meinem Bildschirm, aber wenn eine Größe mein Bildschirm seine Rendering ok, ich brauche dieses Projekt zu reagieren und so weiter in einem Handy kann ich nicht die Größe des Bildschirms ändern, könnte jemand helpme?

+0

der Grund ist, dass Sie statische Breite geben div wenn Sie Breite in Prozent verwenden, die –

+0

ich für Sie bereits versucht, funktioniert es und nicht arbeiten, wenn ich Prozentsatz verwende, überschneidet das Diagramm das div, in dem sein Inneres, und wenn eine Größenänderung den Schirm ich repariere –

+0

finden Sie den fiddle Link http://jsfiddle.net/4cpsczdt/1/ –

Antwort

0

Fiddle Link

Html-Code

<script src="http://code.highcharts.com/highcharts.js"></script> 
<div id="container1" style="width: 100%; max-width: 800px; 
height: 400px; margin: 0 auto"></div> 

JS Code

var chart = new Highcharts.Chart({ 

chart: { 
    defaultSeriesType: 'line', 
    renderTo: 'container1' 
}, 

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, 

series: [{ 
    data: [29.9, 0, 106.4, 129.2, 144.0, 176.0, 0, 148.5, 216.4, 194.1, 95.6, 54.4], 
}] 

}); 
+0

das gleiche Problem auf eine andere Art und Weise bekommen, schaue hier https://jsfiddle.net/2jn2m6vq/, das ist ein Teil des Codes des Diagramms, das Skript ist jetzt die Breite der Kinder für Inhalte mit einer festen Breite einstellen von der max-width, wenn ein setup fixed min width es dann auf die min width aufsetzt –