2013-03-26 1 views
3

Кто-нибудь знает, как уменьшить размер этой круговой диаграммы? Я использую Lazy High Charts gem.HighCharts: уменьшить размер диаграммы

return LazyHighCharts::HighChart.new('pie') do |f| 
     f.chart({:defaultSeriesType=>"pie" , :margin=> [0, 0, 0, 0], backgroundColor: "#F5F5F5", renderTo: "mediamix#{akid.to_s}"}) 
     f.series({:type=> 'pie', :name=> "Count",:data=> data_val, borderWidth: 0}) 
     f.title({ :text=> nil}) 
     f.plot_options({:pie=>{:allowPointSelect=>true, :cursor=>"pointer" , dataLabels: {enabled: true}, showInLegend: false}}) 
    end 

enter image description here

ответ

4

Highcharts делает диаграммы, чтобы заполнить содержащий DIV, который указывается в опции renderTo. В вашем случае, вы указываете:

renderTo:"mediamix#{akid.to_s}" 

Я не использую Ленивый Highcharts Gem, так что я не знаю, что это называется, но вы должны смотреть через ваш код для где определяется этот DIV, и установите его высоту и ширину в размере, который вам нужен.

+0

Я генерирующий DIV ID динамически, как вы можете видеть (mediamix # {akid.to_s}) ... поэтому я не могу стиль этот неизвестный идентификатор из таблицы стилей. Идентификатор используется в команде high_chart = high_chart («mediamix # {f.id.to_s}», Gakie.pie (f.id)) – Pykih

+0

Найден решение. Ты прав. – Pykih

+0

Вы должны дать div размер как-то. Либо дайте ему класс, задайте его свойства высоты/ширины, либо измените его размер, используя javascript/jquery. – SteveP

5

Вы можете также explitly определить ширину и высоту через Highchart API:

$('#container').highcharts({ 
     chart: { 
       height: 200, 
       width:100 
      });