highcharts的柱状图显示数据

Highcharts图表上显示数据

默认情况highcharts柱形图上点击后才显示y数据。 添加plotOptions对应的属性plotOptions设置。

plotOptions :{
column: { pointPadding: 0.2, borderWidth: 0, dataLabels: { enabled: true //设置显示对应y的值 } } }

代码如下

var options2 = {
		chart: {
			type: 'column'                          //指定图表的类型，默认是折线图（line）
		},
		title: {
			text: ''                 // 标题
		},
		xAxis: {
			categories:  ['一月', '二月', '三月','四月', '五月', '六月','七月', '八月', '九月','十月', '十一月', '十二月']  // x 轴分类
		},
		plotOptions :{   
			column: {
 		        pointPadding: 0.2,
 		        borderWidth: 0,
 		        dataLabels: {
 		            enabled: true //设置显示对应y的值
 		        }
 		    }
		},
		yAxis: {
			title: {
				text: '采购金额（万元）'                // y 轴标题
			}
		}
		,
		series: [{                              // 数据列
			name: '年度',                        // 数据列名
			data: [1,4,4,1,3,6,1,0,6,1,2,4]      // 数据               
		}]
	};

// 图表初始化函数
	var chart2 = Highcharts.chart('div_chart2', options2);
	

	<div id="div_chart2" style="width: 100%; height: 400px; min-width:400px;margin: 0px;padding: 0px;">
	   		</div>

 

 

效果对比如下

一不加plotOptions属性的

二plotOptions的column的dataLabels的enabled: true 时候显示柱状的值