Highcharts 中文社区

查看: 2239|回复: 0

[代码共享] 分享一个php内嵌highcharts的案例

[复制链接]
  • TA的每日心情
    开心
    2017-7-3 16:56
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    7

    主题

    79

    帖子

    300

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    300
    发表于 2017-6-15 17:27:42 | 显示全部楼层 |阅读模式
    本帖最后由 简数科技 于 2017-6-15 19:15 编辑
    1. <!DOCTYPE HTML>
    2. <html>

    3. <head>
    4.   <meta charset="utf-8">
    5.   <link rel="icon">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1">
    7.   <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    8.   <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    9.   <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    10.   <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    11. </head>

    12. <body>
    13.   <!--
    14. *************************************************************************
    15.    Generated by HCODE at 2017-06-15 11:58:56
    16.    From: https://code.hcharts.cn/demos/hhhhDj
    17. *************************************************************************
    18. -->
    19.   <div id="container" style="min-width:400px;height:400px"></div>
    20.   <?php
    21.     $pdo = new PDO("mysql:host=localhost;dbname=tougu","root","");
    22.     $pdo->query("set character set utf8");
    23.     $sr = $pdo->query("select * from tubiao");
    24.     while($row=$sr->fetch()){
    25.         $da[] = $row['man'];
    26.         $dat[] = $row['women'];
    27.         $data[] = $row['total'];
    28. }
    29.     $da1 = join($da,',');
    30.     $da2 = join($dat,',');
    31.     $da3 = join($data,',');
    32. ?>
    33.   <script>
    34.   $(function() {
    35.     $('#container').highcharts({
    36.       chart: {
    37.         type: 'column'
    38.       },
    39.       title: {
    40.         text: '2017年各年龄段人口数',

    41.       },
    42.       subtitle: {
    43.         text: '*数据是根据第六次人口普查结果计算得来'
    44.       },
    45.       xAxis: {
    46.         // title:{
    47.         //     text:'年龄/岁',
    48.         //     align:'high'
    49.         // },
    50.         categories: [
    51.           '7-11岁',
    52.           '12-16岁',
    53.           '17-21岁',
    54.           '22-26岁',
    55.           '27-31岁',
    56.           '32-36岁',
    57.           '37-41岁',
    58.           '42-46岁',
    59.           '47-51岁',
    60.           '52-56岁',
    61.           '57-61岁',
    62.           '62-66岁',
    63.           '67-71岁'
    64.         ]
    65.       },
    66.       yAxis: [{
    67.         min: 0,
    68.         title: {
    69.           text: '人口/百万'
    70.         }
    71.         // opposite: true
    72.       }],
    73.       legend: {
    74.         shadow: false
    75.       },
    76.       tooltip: {
    77.         shared: true
    78.       },
    79.       plotOptions: {
    80.         column: {
    81.           grouping: false,
    82.           shadow: false,
    83.           borderWidth: 0
    84.         }
    85.       },
    86.       series: [{
    87.         name: '男',
    88.         color: 'rgba(248,161,63,1)',
    89.         // data: [41.1, 38.5, 40.3, 51.9, 64.0, 50.8, 49.5, 60.4, 63.6, 53.8, 40.4, 41.1, 29.8],
    90.         data: [<?php echo $da1 ?>],
    91.         tooltip: {
    92.           // valuePrefix: '


    93. 以上为全部代码(数据库内容没放);
    94. 连接数据库使用了pdo技术。

    95. ,
    96.           valueSuffix: ' 百万'
    97.         },
    98.         pointPadding: 0.3,
    99.         // pointPlacement: -0.2,
    100.         // yAxis: 1
    101.       }, {
    102.         name: '女',
    103.         color: 'rgba(186,60,61,.9)',
    104.         // data: [34.4, 32.4, 34.6, 48.0, 63.4, 50.2, 47.6, 57.6, 61.1, 51.8, 38.4, 40.2, 28.8],
    105.         data: [<?php echo $da2 ?>],
    106.         tooltip: {
    107.           // valuePrefix: '


    108. 以上为全部代码(数据库内容没放);
    109. 连接数据库使用了pdo技术。

    110. ,
    111.           valueSuffix: ' 百万'
    112.         },
    113.         pointPadding: 0.4,
    114.         // pointPlacement: 0.2,
    115.         // yAxis: 1
    116.       }, {
    117.         name: '总人数',
    118.         type: 'spline',
    119.         // data:[75.5, 70.9, 74.9, 99.9, 127.4, 101.0, 97.1, 118.0, 124.7, 105.6, 78.8, 81.3, 58.7],
    120.         data: [<?php echo $da3 ?>],
    121.         tooltip: {
    122.           valueSuffix: '百万',
    123.         }
    124.       }]
    125.     });
    126.   });
    127.   </script>
    128. </body>

    129. </html>
    复制代码



    以上为全部代码(数据库内容没放);
    连接数据库使用了pdo技术。

    效果图

    效果图
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表