并排显示Highcharts图表

无

显示单个Highcharts图表

无

显示单个Highcharts图表

无

重置当前图表

无

数据为空时，显示提示信息，需调用脚本文件modules/no-data-to-display.src.js

Highcharts.setOptions({
	lang: {
		noData: "查询结果为空"
	},
	noData: {
		style: {
			fontWeight: 'bold',
			fontSize: '25px',
			color: '#303030',
//					opacity: 0.8,
			backgroundColor: 'gray'
		}
	}
});
					

用缓冲样式来设置数据为空时的页面提示信息，需要显式调用showLoading()方法；刷新数据后调用hideLoading()方法取消提示。

Highcharts.setOptions({
	lang: {
		loading: "<" + "i class='fa fa-gear fa-4x fa-spin txt-color-white'><" + "/i>"
	},
	loading: {
		hideDuration: 500,
		showDuration: 500,
 		labelStyle: {
            color: 'white',
    		fontSize: '30px'
        },
        position: {
        	verticalAlign: 'middle'
        },
        style: {
            backgroundColor: 'black'
        }
    }
});

chart.showLoading("查询结果为空");
					

等待后台返回数据时，界面显示等待信息

Highcharts.setOptions({
	lang: {
		loading: "<" + "i class='fa fa-gear fa-4x fa-spin txt-color-white'><" + "/i>"
	},
	loading: {
		hideDuration: 500,
		showDuration: 500,
        labelStyle: {
	        color: 'white',
    		fontSize: '40px'
        },
        style: {
            backgroundColor: 'black',
            opacity: 0.8
        }
    }
});
					

图表点击事件，在plotOptions添加click事件在points.events.click下定义时，可直接用this引用点击点；直接用events.click定义，则需用event.point引用点击点。

series.data中添加自定义参数：

series: [{
	type: 'pie',
	name: 'Browser share',
	data: [
	    {
	        name: 'Firefox',
	        y: 45.0,
	        cn_name: '火狐'
	    }]
}];				
					

plotOptions添加点击事件：

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 35,
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        },
        events: {
        	click: function(event) {
        		var desc = "扇区信息
名称：" + event.point.name + "
中文名：" + event.point.cn_name + "
值：" + event.point.y + "
比例：" + event.point.percentage + " %";
        		addNotify("gritter", "点击事件通知", desc, '5000', null);
        	}
        }
    }
},
					

显示时间轴曲线

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
    },
    title: {
        text: 'Date'
    }
},
series: [{
    name: 'Depth',
    // Define the data points. All series have a dummy year
    // of 1970/71 in order to be compared on the same x axis. Note
    // that in JavaScript, months start at 0 for January, 1 for February etc.
    data: [[new Date("8 3, 2014, 14:15:00").getTime(), 0],
		[new Date("8 3, 2014, 16:15:00").getTime(), 0.6 ],
		[new Date("8 3, 2014, 18:15:00").getTime(), 0.7 ],
		[new Date("8 3, 2014, 20:15:00").getTime(), 0.8 ],
		[new Date("8 3, 2014, 22:15:00").getTime(), 0.6 ],
		[new Date("8 4, 2014, 0:15:00").getTime(), 0.6 ],
		[new Date("8 4, 2014, 2:15:00").getTime(), 0.67],
		[new Date("8 4, 2014, 4:15:00").getTime(), 0.81],
		[new Date("8 4, 2014, 6:15:00").getTime(), 0.78],
		[new Date("8 4, 2014, 7:15:00").getTime(), 0.98],
		[new Date("8 4, 2014, 8:15:00").getTime(), 1.84],
		[new Date("8 4, 2014, 10:15:00").getTime(), 1.80],
		[new Date("8 4, 2014, 12:15:00").getTime(), 1.80],
		[new Date("8 4, 2014, 14:15:00").getTime(), 1.92],
		[new Date("8 4, 2014, 16:15:00").getTime(), 2.49],
		[new Date("8 4, 2014, 18:15:00").getTime(), 2.79],
		[new Date("8 4, 2014, 20:15:00").getTime(), 2.73],
		[new Date("8 4, 2014, 22:15:00").getTime(), 2.61],
		[new Date("8 5, 2014, 0:15:00").getTime(), 2.76],
		[new Date("8 5, 2014, 5:15:00").getTime(), 2.82],
		[new Date("8 5, 2014, 6:15:00").getTime(), 2.8 ],
		[new Date("8 5, 2014, 7:15:00").getTime(), 2.1 ],
		[new Date("8 5, 2014, 8:15:00").getTime(), 1.1 ],
		[new Date("8 5, 2014, 9:15:00").getTime(), 0.25],
		[new Date("8 5, 2014, 10:15:00").getTime(), 0   ]]
}];
					

不使用UTC时间，在初始化Highcharts前调用下面代码

Highcharts.setOptions({
	global: {
		useUTC: false
	}
});