在加载时调整高图

时间:2015-07-14 20:24:30

标签: javascript highcharts

我在图表对象中有这个事件:

mydict["rows"] = [[item.replace("\n", "<br>") for item in row] 
                   for row in mydict["rows"]]

>>> mydict["rows"]
[['col1', 'col2', 'col3'],
 ['testing data 1', 'testing data 2lk<br>Idrjy9dyj', 'testing data 3'],
 ['testing data 2', 'testing data 3', 'testing data 4'],
 ['testing data 3', 'testing data 4', 'testing data 5']]

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

因此,当我的图表宽度为200px时,高度应调整为200px高。发生的事情是它将图形移动到正确的位置,但图表本身仍然是400px高。

我想要解决这个问题的原因是什么?我将css中的图表设置为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}); } ,因此我希望它与该百分比具有相同的高度。我该怎么办?

这是一个工作小提琴:http://jsfiddle.net/epuqj6wy/

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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