HighCharts pełnej szerokości numer

Question

Próbuję zrobić mój renderowany wykres wypełnienia 100% div rodziców bez powodzenia. Czy istnieje sposób na usunięcie luki po lewej i prawej stronie?

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

Jeśli usuniesz opcje width: 300, height: 200 tak:

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

... 

będzie automatycznie wypełnić pojemnik.

Answer 2

Spróbuj tego:

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 i maxPadding 0, patrz: http://jsfiddle.net/sKV9d/3/

Answer 4

Rozwiązałem go

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

UPD:

1. REMOV e atrybuty szerokości i wysokości.
2. dodać do .css następnego kodu w celu dostosowania bloku wykres 100% #container:

wykresu {Szerokość: 100%; wysokość: 100%; }

2a. Innym sposobem jest - w przypadku, gdy nie jest możliwe określenie wielkości pojemnika podczas „Design” czas można reflow wykres po obciążeniu wykresu (tj chart.reflow call();):

chart: { 

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

Patrz przykład http://jsfiddle.net/yfjLce3o/

Answer 5

Jeśli nie podasz właściwości width na wykresie, powinna ona automatycznie uzyskać szerokość kontenera. Po prostu usuń szerokość z wykresu i podaj pojemnik width: 100%, który powinien działać.

Jeśli chcesz określonej szerokości, po prostu zmień szerokość kontenera na określony rozmiar. Wykres powinien nadal wynosić 100% tej wielkości. JSFiddle

Przykład:

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

Problem jest z powodu JQ uuzyczny interfejs użytkownika. po wyrenderowaniu wykresu wywołaj ten kod, aby ponownie wyświetlić wykres. To naprawić mój problem

chart.reflow();