Question

如何指定情节的纵横比？我在仪表板上工作，当您点击静态png图表时，它会变为高图。问题是我的静态图表的绘图区域更加方形，而高图默认为更宽的宽高比。

有没有办法在不指定固定宽度和高度的情况下指定图表所需的宽高比？

编辑：

更好地解释，当我使用div作为我的图表的目标时，它正确填充宽度，但高度似乎由某种宽高比变量决定，我不知道如何改变。

EDIT2：

我可以为所有图表指定例如：

chartHeight = chartWidth * 0.75？

Answer 1

是的，你确定可以！

由于您希望仪表板中的所有图表具有相同的尺寸，我建议如下：

1）定义将由所有容器div共享的基本样式。您可以在此处设置所有宽度和高度共同的宽度和高度。

// in your stylesheet:
.chartStyle {
    width: 100%;
    height: auto;
}

<!-- in your HTML code: -->
<div id="container" class="chartStyle"></div>
<div id="container2" class="chartStyle"></div>

2）在图表代码中，在设置任何图表选项之前，设置基于第一个容器div的当前尺寸计算的宽度和高度变量（因为它们共享相同的宽度和高度）。

var myWidth = $('#container').width();
var myHeight = $('#container').width() * 0.75;

3）在每个图表的选项中，将width和height属性设置为您之前声明的变量。

chart: {
    width: myWidth,
    height: myHeight
},

现在，每个图表都应以您定义的宽高比呈现。

以下是此设置的小提琴：http://jsfiddle.net/brightmatrix/eaut2jcs/

对于奖励积分，您可以设置$(window).resize事件来更新宽度和高度变量，并在用户更改浏览器窗口大小时重绘图表。

要注意的一件事：浏览器无法准确计算隐藏div元素的维度。如果您在从静态PNG切换到交互式图表之前使用display: none或visibility: hidden隐藏图表div，则可能需要在用户点击PNG时设置更明确的值与百分比。

情节宽高比

1 个答案: