您的位置：首页 > 其它

highcharts图表中级入门：图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现4 090. //图表放大

2015-02-12 15:44 1096 查看 

090.
//图表放大
091.
function
ChartFangDa() {
092.
chartWidth
+= 100;
093.
chartHeight
+= 100;
094.
//增加字体大小
统一一次增加2个px
095.
chartTitleFontSize
+= 2;
096.
chartSubTitleFontSize
+= 2;
097.
chartLegendFontSize
+= 2;
098.
chartCreditsFontSize
+= 2;
099.
ChartUpdate();
100.
}
101.
102.
//图表缩小
103.
function
ChartSuoXiao() {
104.
//保证图表大小不会小于500*400
105.
if
(chartWidth > 500) {
106.
chartWidth
-= 100;
107.
chartHeight
-= 100;
108.
//增加字体大小
统一一次减少2个px
109.
chartTitleFontSize
-= 2;
110.
chartSubTitleFontSize
-= 2;
111.
chartLegendFontSize
-= 2;
112.
chartCreditsFontSize
-= 2;
113.
ChartUpdate();
114.
}
else {
115.
alert("对不起，图表不能再缩小了，再缩小就不漂亮了哦~~!");
116.
}
117.
}
118.
119.
///根据变量动态更新图表字体
120.
function
ChartUpdate() {
121.
//设置图表大小
最后一个参数表示是否显示动画效果
122.
chart.setSize(chartWidth,
chartHeight, false);
123.
//设置图表主标题
124.
chart.setTitle({
125.
style:
{
126.
fontSize:
chartTitleFontSize
127.
}
128.
});
129.
//设置副标题
130.
chart.setTitle(null,
{
131.
style:
{
132.
fontSize:
chartSubTitleFontSize
133.
}
134.
});
135.
//设置右下角所有者样式
136.
chart.credits.css({
137.
fontSize:chartCreditsFontSize
138.
});
139.
//设置图例样式
140.
chart.legend.allItems[0].legendItem.css({
141.
fontSize:chartLegendFontSize
142.
});
143.
}
144.
//]]>
145.
</
script
>
146.
</
head
>
147.
<
body
>
148.
<
script
 
src
=
"http://code.highcharts.com/highcharts.js"
></
script
>
149.
<
div
 
id
=
"container"
 
style
=
"height:
400px"
></
div
>
150.
<
input
 
type
=
"button"
 
id
=
"btnFangDa"
 
value
=
"高宽各自放大100px"
 
/>
151.
  
152.
<
input
 
type
=
"button"
 
id
=
"btnSuoXiao"
 
value
=
"高宽各自缩小100px"
 
/>
153.
</
body
>
154.
</
html
>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航