>>您所在位置:博客 >> 技术 >> 技术讲座

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

作者:highcharts | 时间:2013-10-9 14:34:35 | [  ] | 来源:highcharts | 阅读阅读:32776 | 评论  评论: 0 | 收藏 收藏
highcharts,创建,多个,页面,图表,产生,问题,分析  
原创 [摘要]: 将highcharts图表应用到我们实际系统中避免不了要在一个页面加载多个图表的需求,今天我们就来谈谈在页面内动态创建多个highchart图表会遇到哪些问题以及如何分析解决。关于highcharts图表的动态创建方式有很多种: 方式一: var chart1 = new Highcharts.Chart(options); 方式二: var chart1 = $("#divContainer").highcharts(options); 提醒: 页面内加载多个图表的时候,页面内需要放置多个div容器,且在创建的时候renderTo的div容器id需要匹配。 如果在创建多个图表的时候,发现只创建了一个或者部分图表,说明出现了错误...

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

方式一:

var chart1 = new Highcharts.Chart(options);


方式二:

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


提醒:

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

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

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

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

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

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

//创建第一个饼图
chart1 = new Highcharts.Chart(
	{
		chart:
		{
		    renderTo: 'pieOne', //装载图表的div容器id
			defaultSeriesType: 'pie'	//图标类型:line	spline area areaspline column bar pie
		},
    	title:
		{
			text: '饼图1'
		},
 credits: {
    text: 'highcharts的博客',
    href: 'http://www.stepday.com/myblog/?highcharts'
 }
,
        plotOptions:
		{
        	pie:
			{
			    allowPointSelect: true,
			    cursor: 'pointer', 
                dataLabels:
				{
				    enabled: true, 
					color: '#000000', 
					connectorColor: '#000000',
                	formatter: function()
				   	{
                   		return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(1) +' %';
                   	}
                 },
				 showInLegend:true
        	}
    	},
        series: 
		[{
        	name: '当前在线人数:',
            data: 
			[
            	['王翔', 	30],
                ['刘丹', 	17],
				['陈璨',		45],
                ['陈伍军',	120]
            ]
        }]
});

//创建第二个饼图
chart2 = new Highcharts.Chart(
	{
		chart:
		{
		    renderTo: 'pieTwo', //装载图表的div容器id
			defaultSeriesType: 'pie'	//图标类型:line	spline area areaspline column bar pie
		},
    	title:
		{
		    text: '饼图2'
		},
 credits: {
    text: 'highcharts的博客',
    href: 'http://www.stepday.com/myblog/?highcharts'
 }
,
        plotOptions:
		{
        	pie:
			{
			    allowPointSelect: true,
			    cursor: 'pointer', 
                dataLabels:
				{ 
					//enabled: true, 
					color: '#000000', 
					connectorColor: '#000000',
                	formatter: function()
				   	{
                   		return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(1) +' %';
                   	}
                 },
				 showInLegend:true
        	}
    	},
        series: 
		[{
        	type: 'pie',
            name: '当前在线人数:',
            data: 
			[
            	['111', 	310],
                ['2222', 	127],
				['3333',		345],
                ['4444',	180]
            ]
        }]
});


页面两个div容器

<div id="pieOne" style="min-width:500px; height: 200px; margin: 0 auto"></div>
<div id="pieTwo" style="min-width:500px; height: 200px; margin: 0 auto"></div>


效果图如下所示:

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

 

 

今天就写到这里吧!

 

highcharts,创建,多个,页面,图表,产生,问题,分析  
 本文为原创型文章转载请尊重他人劳动成果并注明出处:http://www.stepday.com/topic/?628
系统温馨提示 可以扫描本站该博客文章的QR二维码进行访问  本站该博客文章的QR二维码
上一篇:highcharts图表初级入门之crosshairs:浅谈tooltip数据点提示信息的定位标线问题
下一篇:关于获取Access数据库随机记录的方式汇总
加精
20
踩扁
0
查看评论 查看评论
系统温馨提示 暂无任何评论
发表评论 发表评论
* 以下用户言论只代表其个人观点,不代表STEP DAY网站的观点或立场
用户名:
关联阅读 关联阅读
01 ECharts图表初级入门教程之xAxis-axisLabel:如何设置X轴坐标刻度的样式
02 highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明
03 highcharts图表入门之stackLabels:堆叠图(stacking)中如何显示每一组数据的总数于柱子之上
04 highcharts图表中级入门之dirlldown:如何实现pie(饼状图)的下钻图
05 ECharts图表中级入门之itemStyle:如何让数据点的数据值非常直观地显示以及位置控制
06 ECharts图表组件入门教程:如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
07 highcharts图表中级入门之colors:通过配置colors颜色集合其数值允许用RGB形式来达到控制series颜色示例
08 highcharts图表之bubble:气泡图的气泡大小控制以及影响因素剖析
09 ECharts图表初级入门篇:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
10 ECharts图表组件中级入门(Axis-axisLabel):图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
11 ECharts图表入门初级篇:如何设置绘图区域(grid)和容器大小一样
12 highcharts图表高级入门之polar:极地图的基本配置以及一些关键配置说明
13 asp.net+Ajax如何实现Highcharts图表组件支持大数据(上万个数据点)
14 highcharts入门之tooltip:如何设置数据点不显示数据提示框且显示十字丝crosshairs
系统温馨提示请您注意
·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在STEP DAY新闻评论发表的作品,STEP DAY有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款