您的位置：首页 > 其它

HighCharts之2D柱状图

2014-03-19 07:11 197 查看

1、HighCharts之2D柱状图源码

column.html：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HighCharts 2D柱状图</title>

<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>

<script type="text/javascript" src="../scripts/js/highcharts.js"></script>



<script type="text/javascript">

$(function(){

$('#columnChart').highcharts({

chart: {

type: 'column'

},

title: {

text: '2013年月收入'

},

subtitle: {

text: '月收入'

},

xAxis: {

categories: [

'一月',

'二月',

'三月',

'四月',

'五月',

'六月',

'七月',

'八月',

'九月',

'十月',

'十一月',

'十二月'

]

},

yAxis: {

min: 0,

title: {

text: '收入 (￥)'

}

},

tooltip: {

headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +

'<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',

footerFormat: '</table>',

shared: true,

useHTML: true

},

plotOptions: {

column: {

pointPadding: 0.2,

borderWidth: 0

}

},

series: [{

name: '张三',

data: [4995, 7169, 1064, 7292, 2440, 4545, 6545, 9564, 1245, 4512, 6523, 4514]

}, {

name: '李思',

data: [8361, 2354, 4512, 2356, 4515, 6451, 9865, 5455, 8254, 6562, 6945, 2356]

}, {

name: '王武',

data: [4512, 9565, 6564, 2652, 3265, 1202, 7845, 9845, 2356, 7844, 5424, 6312]

}, {

name: '赵六',

data: [6523, 8956, 6531, 6532, 9864, 4552, 9564, 7845, 6523, 4512, 8956, 2356]

}]

});

});

</script>

</head>

<body>

<div id="columnChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>

</body>

</html>

2、运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航