当前位置: 代码迷 >> Web前端 >> highcharts:结合图,生成可以点击的横坐标
  详细解决方案

highcharts:结合图,生成可以点击的横坐标

热度:232   发布时间:2012-11-23 00:03:43.0
highcharts:组合图,生成可以点击的横坐标
1.生成可以点击的横坐标主要的chart代码:
xAxis: {
	categories: [
    '一月',
	'二月',
	'三月',
	'四月',
	'五月',
	'六月',
	],
	labels:	{//生成可以点击的<a>横坐标
	    formatter: function() {
//this.value的值是:一月或其他的横坐标(当前点击的横坐标的值),showDetails为自己写的函数
		return '<a href="javascript:showDetails(\'' + this.value +'\');">' + this.value + '</a>';
	    }
        }		
}


如果想点击像柱状图的柱子这样的可以在plotOptions设置:

plotOptions: {
		series: {
			cursor: 'pointer',
			events: {
			    click: function() {//点击图上的值时会调用。this为series
			        alert(this.name);
			    }
		        }
		}
}


2.组合图的实现主要的chart代码:
    可以在plotOptions定义对各个图的不同样式,操作
plotOptions: {
		line: {
		       dataLabels: {
				enabled: true
			},
			enableMouseTracking: false					
		},
		column: {
			pointPadding: 0.2,
			borderWidth: 0,
			dataLabels: {
				enabled: false
			},
			enableMouseTracking: true//启用或禁用鼠标跟踪特定系列。这包括点工具提示并单击事件在图表和点。					
		},
		pie: {
		     allowPointSelect: true,
		     cursor: 'pointer',
		     dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
				}
			},
			nableMouseTracking: false		
		 }
}


然后再series写入自己的数据:
要注明type的类型: 'column','line','pie'等。