HighCharts之2D柱状图

来源：互联网发布：淘宝美工要学多久编辑：程序博客网时间：2024/04/30 03:26
HighCharts之2D柱状图
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" src="../scripts/js/modules/exporting.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、运行结果
2 0