Размер по умолчанию для Google диаграммы

У меня есть диаграмма Google, которая установлена в 500px на 500px, но возвращает 400px на 200px. Я посмотрел на div, и он показывает 500x500. У меня нет причин, почему диаграмма возвращается на 400x200. div показывает 500x500, но прямоугольник SVG показывает 400x200, делая все изображения меньше.

Есть ли параметр, который я не знаю?

<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
    <script type="text/javascript">
  var data, options, chart;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ['Qual', 'Stat'],
      ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],
      ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],
      ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],
      ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
      ['Speed',    {{ $stats->attributes['sa_speed'] }}],
      ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],
      ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],
      ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]
    ]);

    options = {
      title: 'My Daily Activities'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
    };

    chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

  function adjustChart(nm, vl) {
    for (var r=0; r<data.D.length; r++) {
      if (data.D[r].c[0].v == nm) {
        data.D[r].c[1].v = parseInt(vl);
        break;
      }
    }
    chart.draw(data, options);
  }
</script>

Ответ 1

Существует несколько способов установить размер диаграммы.

Во-первых, установите размер элемента, который содержит его. Диаграмма будет по умолчанию равна ширине и высоте содержащего элемента (см. Документацию по визуализации Google для значений по умолчанию высоты/ширины).

Во-вторых, не определять фактический размер элемента и вместо этого устанавливать высоту/ширину диаграммы на 500 пикселей каждый вручную, добавляя их к вашим параметрам:

options = {
  title: 'My Daily Activities'
  ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
  ,height: 500
  ,width: 500
};

То, что вы на самом деле делаете в своем коде, - это установка самого графика графика (а не всего элемента диаграммы с осями, надписями и легендой). Это приведет к тому, что область графического графика станет 500px на 500 пикселей, если вы укажете соответствующий div, как указано в комментарии Dr. Dr.Molle.

Предполагая, что вы этого не хотите, ваши новые параметры:

options = {
  title: 'My Daily Activities'
  ,height: 500
  ,width: 500
};

Ответ 2

Таким образом, установка высоты и ширины, как в ответе jmac, работает, но если вы хотите, чтобы она была отзывчивой, мне нужно было сделать некоторые дополнительные вещи.

Но только для того, чтобы поддержать вторую причину, по которой я столкнулся с этой проблемой на первом месте: Дивер, который отображается в этой диаграмме, не отображается, когда страница загружается.

Как видно здесь, скрытая ширина диаграммы Неверная 400 на 200: jsfiddle.net/muc7ejn3/6/

Как видно здесь, скрытая ширина диаграммы Правильная: jsfiddle.net/muc7ejn3/7/

Другой способ сделать это - просто отпрятать диаграмму прямо перед вызовом chart.draw(), затем Скрыть его снова, что-то вроде:

tempShowChart();
chart.draw(view, options);
hideChartAgain();

Это не обрабатывает изменение размера окна.