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

[摘要]：
当我们需要手动切换highcharts图表大小的时候，总想让图表内的一些文字大小也随之图表大小变动而变动，这样才不会显得图表放大或者缩小过后而和内部字体很不相称的结果。那么我们如何才能够达到这样一个目的呢？ 一、解决思路 1、给图表高宽以及内部字体大小设定一个初始值； 2、页面提供图表放大缩小的按钮，点击的时候做出图表高宽以及字体大小的数字调整； 3、通过图表的一些固有方法对其图表进行更新操作，以此来达到图表整个放大缩小的效果。 二、解决办法 1、设定图表高宽以及字体大小的初始值，这里我们字体的大小我们一共包括以下几类：
1)、图表标题(title); 2)、图表副标题(subtitle); 3)、图表图例(legend); 4)、图表...

当我们需要手动切换highcharts图表大小的时候，总想让图表内的一些文字大小也随之图表大小变动而变动，这样才不会显得图表放大或者缩小过后而和内部字体很不相称的结果。那么我们如何才能够达到这样一个目的呢？



一、解决思路

1、给图表高宽以及内部字体大小设定一个初始值；

2、页面提供图表放大缩小的按钮，点击的时候做出图表高宽以及字体大小的数字调整；

3、通过图表的一些固有方法对其图表进行更新操作，以此来达到图表整个放大缩小的效果。

二、解决办法

1、设定图表高宽以及字体大小的初始值，这里我们字体的大小我们一共包括以下几类：

1)、图表标题(title);

2)、图表副标题(subtitle);

3)、图表图例(legend);

4)、图表所有者(credits);

变量定义以及初始值给予的代码为：

view
source

01.

var

chart
=

null

;

02.

//图表高宽

03.

var

chartWidth
= 500;

04.

var

chartHeight
= 400;

05.

//图表字体变量

06.

var

chartTitleFontSize
= 14;

//主标题字体大小

07.

var

chartSubTitleFontSize
= 12

//副标题字体大小

08.

var

chartLegendFontSize
= 12;

//图例Legend的字体大小

09.

var

chartCreditsFontSize
= 9;

//图例右下角所有者字体大小

2、初始化图表

view
source

01.

$(

function

()
{

02.

$(document).ready(

function

()
{

03.

chart
=

new

Highcharts.Chart({

04.

chart:
{

05.

renderTo:

'container'

,

06.

type:

'line'

,

07.

width:
chartWidth,

08.

height:
chartHeight

09.

},

10.

title:
{

11.

text:

'图表手动放大缩小自动切换图标标题以及图例字体示例呈现'

,

12.

style:
{

13.

fontSize:
chartTitleFontSize

14.

}

15.

16.

},

17.

subtitle:
{

18.

text:

'Source:
www.stepday.com'

,

19.

style:
{

20.

fontSize:
chartSubTitleFontSize

21.

}

22.

},

23.

xAxis:
{

24.

categories:
[

'Jan'

,

'Feb'

,

'Mar'

,

'Apr'

,

'May'

,

'Jun'

,

25.

'Jul'

,

'Aug'

,

'Sep'

,

'Oct'

,

'Nov'

,

'Dec'

]

26.

},

27.

yAxis:
{

28.

title:
{

29.

text:

'入住屌丝个数'

30.

},

31.

plotLines:
[{

32.

value:
0,

33.

width:
1,

34.

color:

'#808080'

35.

}]

36.

},

37.

legend:
{

38.

borderWidth:0,

39.

style:
{

40.

fontSize:
chartLegendFontSize

41.

}

42.

},

43.

credits:
{

44.

text:

"www.stepday.com"

,

45.

href:

"http://www.stepday.com"

,

46.

style:
{

47.

color:

"red"

48.

}

49.

},

50.

series:
[{

51.

name:

'2013年12月每月入住屌丝情况'

,

52.

data:
[100,98,45,210,200,400,500,230,120,520,300,250]

53.

}]

54.

});

55.

});

56.

BindBtnClickEvent();

57.

});

由于页面有两个按钮，所以我们初始化的时候多了一步，需要调用一个页面按钮事件注册函数BindBtnClickEvent();

view
source

01.

///给页面按钮注册事件

02.

function

BindBtnClickEvent()
{

03.

$(

"#btnFangDa"

).click(

function

()
{

04.

ChartFangDa();

05.

});

06.

$(

"#btnSuoXiao"

).click(

function

()
{

07.

ChartSuoXiao();

08.

});

09.

}

3、图表放大方法

这个方法主要是给变量增加一定的数值且调用图表重画方法：

view
source

01.

//图表放大

02.

function

ChartFangDa()
{

03.

chartWidth
+= 100;

04.

chartHeight
+= 100;

05.

//增加字体大小
统一一次增加2个px

06.

chartTitleFontSize
+= 2;

07.

chartSubTitleFontSize
+= 2;

08.

chartLegendFontSize
+= 2;

09.

chartCreditsFontSize
+= 2;

10.

ChartUpdate();

11.

}

4、图表缩小

为了保证图表缩小不至于出现压缩的情况，导致图表无法浏览，所以我们需要判断是否小于我们所能够允许的最小值：

view
source

01.

//图表缩小

02.

function

ChartSuoXiao()
{

03.

//保证图表大小不会小于500*400

04.

if

(chartWidth
> 500) {

05.

chartWidth
-= 100;

06.

chartHeight
-= 100;

07.

//增加字体大小
统一一次减少2个px

08.

chartTitleFontSize
-= 2;

09.

chartSubTitleFontSize
-= 2;

10.

chartLegendFontSize
-= 2;

11.

chartCreditsFontSize
-= 2;

12.

ChartUpdate();

13.

}

else

{

14.

alert(

"对不起，图表不能再缩小了，再缩小就不漂亮了哦~~!"

);

15.

}

16.

}