使用zoomtype使用highcharts更新fontsize

时间:2014-10-05 14:33:11

标签: javascript jquery highcharts

我在Highcharts中有一个柱形图,列数很多,因此列非常小。 那很好,但我想做变焦。 所以我使用了zoomtype:'x',效果很好。

问题是我想在选择xAxis时使字体更大。 我试着这样做:

chart: {
            type: 'column',
            zoomType: 'x',
            events: {
                redraw: function(event) {
                    if(this.xAxis[0].tickPositions.length>80){
                        this.xAxis[0].options.labels.style.fontSize = 1;
                    }else{
                        this.xAxis[0].options.labels.style.fontSize = 20;
                        console.log(this.xAxis[0].options.labels.style.fontSize);                  
                    }

                }

            }
        }

当我检查控制台时,this.xAxis [0] .options.labels.style.fontSize的值更新为20。 此代码仅在我按下重置缩放按钮时有效。 所以我的问题是如何在触发事件时更新图表,这样就会产生与使用重置缩放按钮相同的效果?

或者,当我进行缩放和重置缩放时,如何更改字体?

1 个答案:

答案 0 :(得分:1)

您可以使用新的打包样式捕获afterSetExtremes事件,然后axis.update()

events:{
            afterSetExtremes:function(){
                this.update({
                    labels:{
                        style:{
                            fontSize:20
                        } 
                    }
                });
            }
 }

示例:http://jsfiddle.net/m180dxsu/