2015-07-24 20 views
5

Zatem inicjuję zingChart z następującym kodem.Wykres Zingchart nie wypełniający szerokości div jednostki rodzicielskiej

barChartData = 
     "type":"bar" 
     "series":[ 
      "values":[11,16,7,-14,11,24,-42,26,] 
     ] 


    $("#performance-bar-chart").zingchart(
     data: barChartData 
    ) 

Plansza jest renderowana poprawnie, ale szerokość nie wydaje się zbyt duża dla elementu div. Sprawdziłem, czy cokolwiek ustawia wysokość i szerokość, ale nic nie jest.

Po powiększeniu lub pomniejszeniu strony (ctrl + przewijanie myszy) wykres automatycznie powiększa się, aby wypełnić div!

Dziękuję

+0

można dodać skrzypce, ten kod nie pomaga naprawdę –

+0

http://jsfiddle.net/f29jn25b/15/ Kiedy możesz zmniejszyć wysokość sekcji wyniku lub powiększyć stronę, wykres zostanie automatycznie skalowany w celu wypełnienia szerokości – SegFaultDev

+0

Czy to rozwiązuje twój problem? http://jsfiddle.net/eugensunic/f29jn25b/16/, jeśli tak, to przedstawię to jako odpowiedź. –

Odpowiedz

7

Aby rozwiązać problem (nagła zmiana szerokości) należy projektować swoje div używając

CSS:

#myChart { 
    width:100%; 
    height:300px; 
} 

i tu jest twoje JS i HTML w przypadku, gdy skrzypce już nie ma.

HTML:

<div id="myChart"></div> 

JS:

// Data for the chart 
var barChartData = { 
    type: "bar", 
    series: [{ values: [3,7,10,2,6,5]} ] 
}; 

// Make your chart 
$("#myChart").zingchart({ 
    data: barChartData 
});