highCharts实现简单柱形图

js:

function chart(data,title){
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: title
},
subtitle: {
text: '数据来源:'
},
xAxis: {
categories: ['总金额', '收回金额'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '金额 (软妹币)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' 软妹币'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'you',
data: data
}]
});
}

jsp页面js：

<script type="text/javascript">
　　$('#search').click(function(){
　　　　var url = "${xxx}/orderEffectIndexData";
　　　　$.post(url,{},function(data){
　　　　chart(data.dataList,'常规催付效果呦！！');
},'json')
})
</script>

效果: