Размер по умолчанию для 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();
Это не обрабатывает изменение размера окна.