zoukankan      html  css  js  c++  java

  • 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=" 1200px; height: 500px; margin: 0 auto"></div>  
    80. </body>  
    81. </html>  

    2、运行结果
  • 相关阅读:
    数组名与指向数组的指针
    如何实现带可变长参数的函数
    assert()的使用
    参数入栈的顺序以及栈/堆的生长顺序
    指向函数的指针
    各变量入栈顺序
    数组与指针
    C中空指针、NULL与0
    C中为什么不能用==比较字符串？
    在命令行窗口中输入EOF
  • 原文地址：https://www.cnblogs.com/web100/p/HighCharts-2D.html
Copyright © 2011-2022 走看看