HighCharts之2D柱状图

1、HighCharts之2D柱状图源码

column.html： 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HighCharts 2D柱状图</title>  
  6. <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>  
  7. <script type="text/javascript" src="../scripts/js/highcharts.js"></script>  
  8. <!-- <script type="text/javascript" src="../scripts/js/modules/exporting.js"></script> -->  
  9. <script type="text/javascript">  
  10.      $(function(){  
  11.          $('#columnChart').highcharts({  
  12.              chart: {  
  13.                  type: 'column'  
  14.              },  
  15.              title: {  
  16.                  text: '2013年月收入'  
  17.              },  
  18.              subtitle: {  
  19.                  text: '月收入'  
  20.              },  
  21.              xAxis: {  
  22.                  categories: [  
  23.                      '一月',  
  24.                      '二月',  
  25.                      '三月',  
  26.                      '四月',  
  27.                      '五月',  
  28.                      '六月',  
  29.                      '七月',  
  30.                      '八月',  
  31.                      '九月',  
  32.                      '十月',  
  33.                      '十一月',  
  34.                      '十二月'  
  35.                  ]  
  36.              },  
  37.              yAxis: {  
  38.                  min: 0,  
  39.                  title: {  
  40.                      text: '收入 (￥)'  
  41.                  }  
  42.              },  
  43.              tooltip: {  
  44.                  headerFormat: '<span style="font-size:10px">{point.key}</span><table>',  
  45.                  pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +  
  46.                      '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',  
  47.                  footerFormat: '</table>',  
  48.                  shared: true,  
  49.                  useHTML: true  
  50.              },  
  51.              plotOptions: {  
  52.                  column: {  
  53.                      pointPadding: 0.2,  
  54.                      borderWidth: 0  
  55.                  }  
  56.              },  
  57.              series: [{  
  58.                  name: '张三',  
  59.                  data: [4995, 7169, 1064, 7292, 2440, 4545, 6545, 9564, 1245, 4512, 6523, 4514]  
  60.        
  61.              }, {  
  62.                  name: '李思',  
  63.                  data: [8361, 2354, 4512, 2356, 4515, 6451, 9865, 5455, 8254, 6562, 6945, 2356]  
  64.        
  65.              }, {  
  66.                  name: '王武',  
  67.                  data: [4512, 9565, 6564, 2652, 3265, 1202, 7845, 9845, 2356, 7844, 5424, 6312]  
  68.        
  69.              }, {  
  70.                  name: '赵六',  
  71.                  data: [6523, 8956, 6531, 6532, 9864, 4552, 9564, 7845, 6523, 4512, 8956, 2356]  
  72.        
  73.              }]  
  74.          });  
  75.      });  
  76. </script>  
  77. </head>  
  78. <body>  
  79.    <div id="columnChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>  
  80. </body>  
  81. </html>  

 

 

2、运行结果

posted @ 2014-03-19 07:11  web8  阅读(714)  评论(0)  编辑  收藏  举报