Google图表默认大小

我有一个设置为500px×500px的Google图表，但返回400px×200px。我已经看过这个div，它显示500x500。我没有理由为什么图表会以400x200的速度回归。 div显示500x500，但SVG矩形框显示400x200，使所有图像更小。Google图表默认大小

有没有我不知道的设置？

<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>

来源

2013-01-13 arcee123

您的代码中的div不是div中绘制图表的位置（它是#qual_div），您确定#chart_div的大小为500x500。对于我来说，您的代码可以正常使用500x500 div，大小将正确应用于svg –

如果下面的答案适合您，请点击答案中向上/向下箭头下方的复选标记，以便其他人可以看到这解决了你的问题。如果我的回答不够清楚，或者您仍然有问题，请在答案中添加评论，以解释哪些问题/哪些问题不明确。 – jmac

有几种方法可以设置图表大小。

第一个是设置包含它的元素的大小。图表将默认为包含元素的宽度和高度（see Google Visualization documentation for default values of height/width）。

二是没有定义元素的实际大小，而是设置图表的高度/宽度各500像素，加入那些你选择手动：

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

你实际上是在做什么在你的代码中设置图表本身的大小（而不是整个图表元素的坐标轴，标签和图例）。如果您指向@ Dr.Molle在注释中指出的相应div，这将导致图表绘图区域变为500px x 500px。

假设你不希望这样，你的新方案就是：

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

来源

2013-01-15 00:05:43 jmac

但是，这将如何反映在窗口调整大小？默认情况下，我的图案以400X200像素显示。我不想在选项中设置宽度/高度，因为它可能会超出窗口大小的限制。我如何处理这个问题？ –

真的很有帮助，谢谢 – Doidgey

@Shivaji_Vidhale宽度问题的任何解决方案？ – Aadam

所以设置的高度和宽度在JMAC的答复工作，但如果你想让它响应，还有一些额外的东西我必须做。

但是仅仅备份我有在一号位这个问题，第二个原因是：这个图表显示在div是不可见在页面加载时。

由于这里看到的隐藏图表的宽度是错误 400 200：jsfiddle.net/muc7ejn3/6/

由于这里看到的隐藏图表的宽度是正确：jsfiddle.net/muc7ejn3/7/

另一种方式来做到这一点是刚刚取消隐藏chart.draw（）被调用前右图表，然后再次隐藏它，像：

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

这不处理窗口正在调整大小。

来源

2017-06-15 19:11:00

是一个答案或另一个问题？ –

这是为什么谷歌图表出现在400px×200px的问题的答案。我不觉得接受的答案足够好，因为它强制你指定一个固定的像素宽度和高度。我的解决方案，你可以指定div的50％宽度，它会调整，或使用引导列，它会调整等... –

Google图表默认大小

回答

相关问题