zoukankan      html  css  js  c++  java
  • HighCharts之2D柱状图

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

    2、运行结果


  • 相关阅读:
    (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated UXXXXXXXX escape 错误
    Pandas_key_point
    鲁棒性、稳定性、非脆弱性
    防止过拟合的处理方法
    Python中的random模块
    Python reload(sys)找不到,name 'reload' is not defined
    sigmoid 和 soft-max总结
    2.7 Structured Regression Models
    2.x ESL第二章习题2.4
    2.6. Statistical Models, Supervised Learning and Function Approximation
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315291.html
Copyright © 2011-2022 走看看