绘图纵横比

如何指定绘图的纵横比？我正在使用仪表板，当你点击一个静态PNG图表时，它会变成一个高图。问题在于我的静态图表的绘图区域更加平坦，而高图缺省为更宽的高宽比。绘图纵横比

有没有什么办法可以指定我想要的图表的纵横比而不指定固定的宽度和高度？

编辑：

更好地说明，当我使用DIV作为我图的目标，它正确填写宽度，但高度似乎得到通过某种宽高比可变的，我不知道如何决定更改。

EDIT2：

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

chartHeight = chartWidth * 0.75？

来源

2016-11-16 LucasSeveryn

是的，你确定可以！

既然你想拥有所有控制台上的图表，以具有相同的尺寸，我建议如下：

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）在每个图表的选项中，将宽度和高度属性设置为您先前声明的变量。

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

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

下面是在此设置一个小提琴：http://jsfiddle.net/brightmatrix/eaut2jcs/

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

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

来源

2016-11-16 12:58:11

回答

相关问题