2016-01-16 2 views
0

У меня возникла проблема с отображением моего графика Google в размере по умолчанию (ширина: 400 пикселей и высота: 200 пикселей), в то время как я хочу, чтобы он был другого размера. Мне интересно, если это имеет какое-то отношение к тому, что оно находится в частичном представлении или что-то в этом роде, но иногда оно отображается корректно, если я изменяю размер кода и обновляю его. Если вы можете помочь мне заранее.Диаграмма Google не отображается с правильной высотой и шириной

@model ProjectServerside.PresentationModels.PMData 
 

 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script type="text/javascript"> 
 
    google.charts.load('current', { packages: ['corechart', 'bar'] }); 
 
    google.charts.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
      var data = google.visualization.arrayToDataTable([ 
 
      ['Element', 'Count', { role: 'annotation' }], 
 
      ['Threads',@Html.DisplayFor(model => model.ThreadCount), 'Threads'], 
 
      ['Votes', @Html.DisplayFor(model => model.VoteCount), 'Votes'], 
 
      ['Comments',@Html.DisplayFor(model => model.CommentCount), 'Comments'], 
 
      ]); 
 

 
      var options = { 
 
       chart: { 
 
        title: 'Interest Performance', 
 
        subtitle: 'Threads, Votes, and Comments', 
 
        width: 900, 
 
        height: 500 
 
       }    
 
      }; 
 

 
      var chart = new google.charts.Bar(document.getElementById('graph')); 
 

 
      chart.draw(data, options); 
 
     } 
 
</script> 
 
<div id="graph" style="width: 900px; height: 500px"></div>

не хватает, так это на файл макета HTML, таким образом, входит в заголовок. Опять же, если вы могли бы помочь мне с этим поблагодарить вас заранее.

This is how it displays on the page now

+0

Я бы рекомендовал извлекать style' атрибут 'из' DIV 'и используя диаграмму' options' для управления размером. имейте в виду, что существуют общие 'height' и' width' вместе с 'chartArea: height' и' width', который не включает метки осей или легенды ... – WhiteHat

+0

@WhiteHat, Спасибо за комментарий , Я попробовал, как вы предложили, но это действительно не решает проблему, но по-прежнему отображается как значения по умолчанию, как я упоминал выше. Я думаю, что это может быть связано с тем, что это частичное представление (возвращенное с контроллера), а не загрузка параметров правильно. – Haradrim

ответ

0

есть нет ширина/properties для по высоте options.chart

Вы должны определить width и height как свойства options

var options = { 
        width: 900, 
        height: 500, 
        chart: { 
          title: 'Interest Performance', 
          subtitle: 'Threads, Votes, and Comments'      
         }    
       }; 
0

Во-первыхи, убедитесь, что вы включить запятую после вашей высоты.

<div id="graph" style="width: 900px; height: 500px;"></div>