良玉的博客 点点滴滴,积水成河_良玉的博客_页游、手游linux运维工程师之路

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

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

方式一:


1.var chart1 = new Highcharts.Chart(options);


方式二:


1.var chart1 = $("#divContainer").highcharts(options);


提醒:

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

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

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

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

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

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


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的博客',
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的博客',
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


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>


效果图如下所示:

view plaincopy在CODE上查看代码片派生到我的代码片

  1. var inner = '<div id="mydiv"></div>';  

  2. document.getElementById("Chart").innerHTML = inner;  


标签: highchartsjs动态

作者:良玉 分类:Highcharts 浏览:870 评论:0
留言列表
发表评论
来宾的头像