Clicked（滑鼠點選事件）

var chart = Highcharts.chart('container',{
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false
	},
	title: {
		text: '統計資訊'
	},
	tooltip: {
	},
	plotOptions: {
		series:{
			events:{
				click:function(e){
					console.log(e)
					alert(e.point.name);
				}
			}},
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				style: {
					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
				}
			},
			showInLegend: true
		}
	},
	series: [
		{
			type: 'pie',
			name: '次數',
			data: [{y:1,name:'test1'},{y:2,name:'test2'}]
		}]
});
 

在plotOptions的events中對series進行相關事件進行配置。 series的點選事件，預設的方法是click，相較於一般的控制元件，是預設series的點選事件方法名為cl ick，無固定的返回值。相較而言，remmove等事件，需要在其他地方呼叫,且內部方法固定。remove 方法的預設返回值為true，直接呼叫remove函式可以刪除當前節點。

click:function(e){
					//console.log(e);
					if (confirm('Do you really want to remove this point?')) {
						console.log(1);
						//alert(e.point.name);
						e.point.remove();
					}else{
						console.log(2);
					}
				}
 

被外部控制元件呼叫的highcharts內建方法

在這裡以remove方法為例子。 javascript

var chart = Highcharts.chart('container', {
	plotOptions: {
		series: {
			point: {
				events: {
					remove: function () {
						if (!confirm('Do you really want to remove the first point?')) {
							return false;
						}
					}
				}
			}
		}
	},
	series: [{
		data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
	}]
});
$('#button').click(function () {
	var series = chart.series[0];
	if (series.data.length) {
		chart.series[0].data[0].remove();
	}
});

 

html

<div id="container" style="min-width:400px;height:400px"></div>
<input id="button" type="button" value="button">