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

5、图表重画

1）、通过setSize(width,height)方法修改图表的高宽

view source

1. //设置图表大小  最后一个参数表示是否显示动画效果

2. chart.setSize(chartWidth, chartHeight, false);

2）、通过setTitle(object)动态设置图表标题以及副标题的样式：

view source

01. //设置图表主标题        

02. chart.setTitle({

03. style: {

04. fontSize: chartTitleFontSize

05. }

06. });

07. //设置副标题

08. chart.setTitle(null, {

09. style: {

10. fontSize: chartSubTitleFontSize

11. }

12. });

3）、通过chart.credits.css(object)方法设置credits拥有者的样式：

view source

1. //设置右下角所有者样式

2. chart.credits.css({

3. fontSize:chartCreditsFontSize

4. });

4）、修改图例的样式这个比较麻烦

view source

1. //设置图例样式

2. chart.legend.allItems[0].legendItem.css({

3. fontSize:chartLegendFontSize

4. });

5）、完整的更新图表的方法封装如下所示：

view source

01. ///根据变量动态更新图表字体

02. function ChartUpdate() {

03. //设置图表大小  最后一个参数表示是否显示动画效果

04. chart.setSize(chartWidth, chartHeight, false);

05. //设置图表主标题        

06. chart.setTitle({

07. style: {

08. fontSize: chartTitleFontSize

09. }

10. });

11. //设置副标题

12. chart.setTitle(null, {

13. style: {

14. fontSize: chartSubTitleFontSize

15. }

16. });

17. //设置右下角所有者样式

18. chart.credits.css({

19. fontSize:chartCreditsFontSize

20. });

21. //设置图例样式

22. chart.legend.allItems[0].legendItem.css({

23. fontSize:chartLegendFontSize

24. });          

25. }