2014-05-14 14 views
6

Sto provando a creare una pagina dinamica con un numero compreso tra 1-4 grafici che può essere aggiunto o rimosso in base alle esigenze, ma ho incontrato un grosso problema e non riesco a sembrare per ridimensionare il grafico dopo aver ridimensionato il div contenente. per esempio se aggiungo un grafico sulla pagina sarà larghezza 800, quindi fare clic su un pulsante per aggiungere un altro grafico che dovrebbe ridimensionarsi per essere un pezzo di 400 ma non posso farlo accadere. Come un modello molto semplicistico Ho il seguentenon funzionano e il reflow non funziona

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'line', 
      width: 300 
     }, 
     title: { 
      text: 'Width is set to 300px' 
     }, 

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

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 
    $('#resize').click(function() { 
     $('#container').attr('style', 'width: 800px'); 
     $("#container").highcharts().reflow(); 
     console.log($('#container').width()); 
    }); 
}); 

ora quando questo viene eseguito si registrerà 800 alla finestra strumenti di sviluppo in cromo, ma il grafico non verrà ridimensionata. Ho provato sia il ridisegno() che il reflow() come suggerito nella documentazione per i grafici alti. Ho anche installato una demo molto veloce su jsfiddle qui, http://jsfiddle.net/7cbsV/ chiunque può aiutarmi. È abbastanza importante. Grazie in anticipo per l'aiuto.

risposta

4

Informazioni sull'utilizzo di chart.setSize(w,h)? Vedi docs.

$("#container").highcharts().setSize(800, height); 
1

basta togliere la larghezza del grafico da

$('#container').highcharts({ 
    chart: { 
     type: 'line', 
     width: 300 
    }, 

modo che sia simile

$('#container').highcharts({ 
    chart: { 
     type: 'line' 
    }, 

e impostare la larghezza contenitore 300 simili

#container { 
    width: 300px; 
} 

poi basta ridimensiona il contenitore div come stai già facendo. il grafico verrà ridimensionato in base alla larghezza del contenitore div.

spero che questo aiuti.

Problemi correlati