2015-07-24 8 views
5

Итак, я инициализирую zingChart следующим кодом.Диаграмма Zingchart не заполняет ширину родительского div

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


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

Барчарт визуализирован правильно, но ширина не кажется значительной частью родительского div. Я проверил, если что-то устанавливает высоту и ширину, но ничего нет.

Когда я увеличиваю или уменьшаю масштаб страницы (ctrl + mouse scroll), диаграмма автоматически расширяется, чтобы заполнить родительский div!

Спасибо,

+0

Вы можете добавить скрипку, этот код не помогает действительно –

+0

http://jsfiddle.net/f29jn25b/15/ Когда вы уменьшаете высоту участка результата или увеличиваете масштаб страницы, диаграмма внезапно будет автоматически уменьшаться, чтобы заполнить ширину. – SegFaultDev

+0

Решает ли ваша проблема ваша проблема? http://jsfiddle.net/eugensunic/f29jn25b/16/, если да, тогда я отвечу на это как ответ. –

ответ

7

Чтобы решить вашу проблему (внезапное изменение ширины), вы должны укладывать DIV с помощью

CSS:

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

и вот ваш JS и HTML в том случае, скрипка ушла.

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 
});