Highcharts - problema sull'intera larghezza della tabella

Question

Sto usando il grafico a colonne Highcharts e voglio che sia un grafico responsive al 100% della larghezza. Il contenitore è un semplice <div> senza alcuna formattazione. Quando il documento viene caricato, il grafico è sempre a larghezza fissa 600 x 400 px. Se ridimensiono la finestra o passa a un'altra scheda del browser, il grafico riempie la larghezza e diventa un grafico a larghezza piena reattiva proprio come volevo. Se ricarico la pagina, è di nuovo a larghezza fissa. Ho provato a impostare la larghezza sia sul contenitore che sul grafico, tuttavia, nulla aiuta. Se sposto il contenitore div di un livello sopra il div genitore, funziona. Come fare a far sì che il grafico diventi a larghezza intera anche sul caricamento della pagina?

Grazie larghezza

Answer 1

del grafico è tratto da jQuery.width(container), quindi se hai grafico in alcune schede nascosti o qualcosa di simile, la larghezza sarà indefinito. In tal caso, la larghezza e l'altezza predefinite sono impostate (600x400).

Answer 2

So che questa è una domanda vecchia, ma mi sono imbattuto nello stesso identico problema e ho trovato un'altra soluzione che funziona benissimo.

A partire da Highcharts 4.1.5 (potrebbe essere anche nelle versioni precedenti), l'oggetto chart ha una funzione reflow(). Visualizza la documentazione here.

reflow()

scorrimenti il ​​grafico relativo contenitore. Per impostazione predefinita, il grafico si sposta automaticamente nel suo contenitore dopo un evento window.resize, come per l'opzione chart.reflow. Tuttavia, non ci sono eventi affidabili per il ridimensionamento div, quindi se il contenitore viene ridimensionato senza un evento di ridimensionamento della finestra, questo deve essere chiamato esplicitamente.

Spero che aiuti qualcun altro.