关于页面动态创建多个highcharts图表所产生的问题汇总以及分析

将highcharts图表应用到我们实际系统中避免不了要在一个页面加载多个图表的需求，今天我们就来谈谈在页面内动态创建多个highchart图表会遇到哪些问题以及如何分析解决。关于highcharts图表的动态创建方式有很多种：

方式一：

view
sourceprint?

1.

var

chart1
=

new

Highcharts.Chart(options);

方式二：

view
sourceprint?

1.

var

chart1
=$(

"#divContainer"

).highcharts(options);

提醒：

页面内加载多个图表的时候，页面内需要放置多个div容器，且在创建的时候renderTo的div容器id需要匹配。

如果在创建多个图表的时候，发现只创建了一个或者部分图表，说明出现了错误，错误的原因分析如下所示：

1、jQuery.js的版本是否和highchart.js版本一直；

2、highchart.js是不是不支持初始化图表内的某些属性值，简言之就是highchart.js的版本不对。

3、放置图表的div容器不存在或者id写错。

完整示例在页面内创建两个pie图，代码如下所示：

view
sourceprint?

01.

//创建第一个饼图

02.

chart1
=

new

Highcharts.Chart(

03.

{

04.

chart:

05.

{

06.

renderTo:

'pieOne'

,

//装载图表的div容器id

07.

defaultSeriesType:

'pie'

//图标类型：line
spline area areaspline column bar pie

08.

},

09.

title:

10.

{

11.

text:

'饼图1'

12.

},

13.

credits:
{

14.

text:

'highcharts的博客'

,

15.

href:

'http://www.stepday.com/myblog/?highcharts'

16.

}

17.

,

18.

plotOptions:

19.

{

20.

pie:

21.

{

22.

allowPointSelect:

true

,

23.

cursor:

'pointer'

,

24.

dataLabels:

25.

{

26.

enabled:

true

,

27.

color:

'#000000'

,

28.

connectorColor:

'#000000'

,

29.

formatter:

function

()

30.

{

31.

return

'<b>'

+

this

.point.name
+

'</b>:
'

+

this

.percentage.toFixed(1)
+

'
%'

;

32.

}

33.

},

34.

showInLegend:

true

35.

}

36.

},

37.

series:

38.

[{

39.

name:

'当前在线人数：'

,

40.

data:

41.

[

42.

[

'王翔'

,
30],

43.

[

'刘丹'

,
17],

44.

[

'陈璨'

,
45],

45.

[

'陈伍军'

,
120]

46.

]

47.

}]

48.

});

49.

50.

//创建第二个饼图

51.

chart2
=

new

Highcharts.Chart(

52.

{

53.

chart:

54.

{

55.

renderTo:

'pieTwo'

,

//装载图表的div容器id

56.

defaultSeriesType:

'pie'

//图标类型：line
spline area areaspline column bar pie

57.

},

58.

title:

59.

{

60.

text:

'饼图2'

61.

},

62.

credits:
{

63.

text:

'highcharts的博客'

,

64.

href:

'http://www.stepday.com/myblog/?highcharts'

65.

}

66.

,

67.

plotOptions:

68.

{

69.

pie:

70.

{

71.

allowPointSelect:

true

,

72.

cursor:

'pointer'

,

73.

dataLabels:

74.

{

75.

//enabled:
true,

76.

color:

'#000000'

,

77.

connectorColor:

'#000000'

,

78.

formatter:

function

()

79.

{

80.

return

'<b>'

+

this

.point.name
+

'</b>:
'

+

this

.percentage.toFixed(1)
+

'
%'

;

81.

}

82.

},

83.

showInLegend:

true

84.

}

85.

},

86.

series:

87.

[{

88.

type:

'pie'

,

89.

name:

'当前在线人数：'

,

90.

data:

91.

[

92.

[

'111'

,
310],

93.

[

'2222'

,
127],

94.

[

'3333'

,
345],

95.

[

'4444'

,
180]

96.

]

97.

}]

98.

});

页面两个div容器，每个图对应一个div

view
sourceprint?

1.

<div
id=

"pieOne"

style=

"min-width:500px;
height: 200px; margin: 0 auto"

></div>

2.

<div
id=

"pieTwo"

style=

"min-width:500px;
height: 200px; margin: 0 auto"

></div>

效果图如下所示：



如果想动态添加div可以使用

var inner = '<div id="mydiv"></div>';
document.getElementById("Chart").innerHTML = inner;