加载时调整 highchart 的大小答案

【问题标题】：resize highchart on load加载时调整 highchart 的大小
【发布时间】：2015-07-16 04:11:46
【问题描述】：

我的图表对象中有这个事件：

load: function(){
    var text = this.renderer.label(percentage + '%').css({
        color: 'white',
        fontSize: fontSize + 'px',
        fontFamily: "'Raleway', sans-serif",
        fontWeight: 100
    }).add();

    var textBBox = text.getBBox();
    this.chartHeight = this.chartWidth;
    this.redraw();

    var x = ((this.renderer.width - textBBox.width) / 2) + 10;
    var y = ((this.renderer.height - textBBox.height) / 2) - (fontSize / 5);
    text.attr({x: x, y: y});

}

我想要做的是将图表的高度设置为与图表的宽度相同。看起来它有点工作，因为图表中的项目放置在正确的位置，但图表默认为 400px 高度。

所以当我的图表是 200px 宽时，高度应该调整为 200px 高。正在发生的事情是将图表移动到正确的位置，但图表本身仍然是 400 像素高。

我缺少什么来解决这个问题？我将css中的图表设置为100%，所以我希望它与该百分比的高度相同。我能做什么？

这是一个有效的小提琴：http://jsfiddle.net/epuqj6wy/

你可以看到图表是 400px，它应该是一个完美的正方形

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您可以使用 setSize 方法。比如chart.setSize(width, width);

http://api.highcharts.com/highcharts#Chart.setSize

【讨论】：

这对某些事情有帮助，并且图表已正确调整大小，但图表仍然是 400px 高
如果可能的话，你能添加到 jsfiddle 的链接吗？
我在问题中添加了一个小提琴
不，我需要完美的正方形
如果您确定一旦图表被加载就不需要调整它的大小，您可以在加载事件处理程序中尝试下面的代码。 var size = this.chartWidth;大小 = 大小 > this.chartHeight ？大小：this.chartHeight； this.setSize(大小, 大小); },

【解决方案2】：

我能够抓住容器并使用样式重置它的高度。

events: {
    load: function(){
        this.setSize(this.chartWidth, this.chartWidth);
        this.container.style.height = this.chartWidth + "px";
    }
}

【讨论】：