highCharts3D圆柱图的使用

//3D圆柱图配置项
function fill3DBar(obj){
	var options ={
			tooltip: {
				shared: true, //是否共享提示,也就是X一样的所有点都显示出来
				useHTML: true, //是否使用HTML编辑提示信息
				headerFormat: '<small>{point.key}</small><table>',
				pointFormat: '<tr><td>水耗用量:</td>' +
				'<td style="text-align: right"><b>{point.y}</b></td></tr>',
				footerFormat: '</table>',
				valueDecimals: 2 //数据值保留小数位数
				},
			chart: {
				renderTo: 'container',
				type: 'cylinder',
				backgroundColor: '#134797',
				options3d: {
					enabled: true,
					alpha: 20,
					beta: 0,
					depth: 0,
					viewDistance: 25
				}
			},
			plotOptions: { 
				series: { //注意:当此处为series是针对所有图表类型有效
					depth: 25,
					dataLabels: { //显示柱形上方的文字标签
						color:"#fff",
						enabled: true,
						defer: false,
						y:-25
					},
				}
			},
			title: {
				text: '水耗用量(m3)',
				style:{ "color": "#ffffff"}
			},
			xAxis:{
				type:"category",
				labels:{
					style:{
						color:'#ffffff'
					}
				},
				gridLineColor: '#666',//纵向网格线颜色
				gridLineWidth: 1 //纵向网格线宽度
			},
			yAxis: {
				type: 'category',
				title:{
					text:'m3',
					align:"high",
					rotation:'0',
					offset: 0,
					style:{
						 "color": "#FFFFFF" 
					},
					y:-10
				},
				gridLineColor: '#666',//横向网格线颜色
				gridLineDashStyle: 'longdash',//横向网格线样式
				gridLineWidth: 1 ,//横向网格线宽度
				labels:{
					style:{
						color:'#ffffff'
					}
				}
			},
			legend: {
				enabled: false,
				floating:false
			},
			series:obj.series,
		};
	 myChart3DBar = Highcharts.chart('shylBar', options);
}
//模拟数据调用
var waterHourDosage = [{y: 29.9,name: '02'}, {y: 71.5,name: '04'},{y: 106.4,name: '06'}, {y: 129.2,name: '08'},
				{y: 144.0,name: '10'},{y:176.0,name: '12'}, {y: 135.6,name: '14'}, {y: 148.5,name: '16'}, {y: 216.4,name: '20'
			},{y: 194.1,name: '22'}, {y:95.6,name: '24'}, {y: 54.4,name: '26'}]
			var waterHourDosageSeries =[];
			waterHourDosageSeries.push({
				data: waterHourDosage,    
				color:"#AFB75D"
			})
			fill3DBar({
				series:waterHourDosageSeries
			})

**效果图**

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值