Problema di larghezza massima di HighCharts

Question

Sto cercando di rendere il mio grafico di rendering pieno del 100% del div padre senza successo. C'è un modo per rimuovere lo spazio sui lati sinistro e destro?

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

Se si rimuovono le opzioni width: 300, height: 200 come questo:

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

... 

riempirà automaticamente il contenitore.

Answer 2

Prova questo:

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 e maxPadding a 0, vedi: http://jsfiddle.net/sKV9d/3/

Answer 4

ho risolto da

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

UPD:

1. Remov e larghezza e altezza attributi.
2. aggiungere nel css il seguente codice per adeguare blocco grafico 100% di #container:

grafico {width: 100%; altezza: 100%; }

2a. un altro modo è - nel caso se non è possibile definire dimensione del contenitore durante la fase di "design" è possibile ridisporre grafico dopo carico grafico (cioè chart.reflow chiamata();):

chart: { 

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

Vedi esempio http://jsfiddle.net/yfjLce3o/

Answer 5

Se non si fornisce la proprietà width al grafico, dovrebbe automaticamente ottenere la larghezza del contenitore. Quindi basta rimuovere la larghezza dal grafico e dare il contenitore width: 100% e questo dovrebbe funzionare.

Se si desidera una larghezza specifica, è sufficiente modificare la larghezza del contenitore in base a una dimensione specifica. Il grafico dovrebbe essere ancora al 100% di quella dimensione. JSFiddle

Esempio:

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

Il problema è a causa della JQ interfaccia utente dopo aver reso il tuo grafico chiama questo codice per ridisporre il grafico. Questo risolto il mio problema

chart.reflow();