Highcharts 中文社区

查看: 2689|回复: 7

[PHP相关] 用PHP读取到了Mysql数据库的数据,要如何放到highcharts图表.....

[复制链接]
  • TA的每日心情
    慵懒
    2016-1-15 09:16
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    5

    帖子

    53

    积分

    HC 新手

    Rank: 1

    积分
    53
    发表于 2016-1-13 14:54:02 | 显示全部楼层 |阅读模式
    以下是我的代码块:
    1. <?php
    2.     $conn=mysql_connect('127.0.0.1','liu','') or die("链接数据库失败!");
    3.     mysql_select_db('test') or die("选择数据库失败");
    4.     mysql_query('set names utf8');
    5.     $sql="select * from `web_index`";
    6.     $res=mysql_query($sql);
    7.     while($rows = @mysql_fetch_assoc($res)){
    8.         $str .= "[".$rows['name'].",".$rows['yye']."],";
    9.     }
    10.     $str = trim($str,".,");
    11.     echo $str;
    12. ?>
    13. <!DOCTYPE html >
    14. <html xmlns="http://www.w3.org/1999/xhtml">

    15. <head>
    16.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    17.     <title>网格管理</title>
    18.     <link rel="stylesheet" type="text/css" href="/css/buju2.css">
    19.     <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    20.     <style type="text/css">
    21.     $ {
    22.         demo.css
    23.     }
    24.     </style>
    25.     <script type="text/javascript">
    26.     $(function() {

    27.         $('#container2').highcharts({
    28.             chart: {
    29.                 type: 'column'
    30.             },
    31.             title: {
    32.                 text: '月累计创收统计图'
    33.             },
    34.             xAxis: {
    35.                 type: 'category',
    36.                 labels: {
    37.                     rotation: 0,
    38.                     style: {
    39.                         fontSize: '13px',

    40.                         fontFamily: 'Verdana, sans-serif',
    41.                     }
    42.                 }
    43.             },
    44.             yAxis: {
    45.                 min: 0,
    46.                 title: {
    47.                     text: '       '
    48.                 }
    49.             },
    50.             legend: {
    51.                 enabled: false
    52.             },
    53.             tooltip: {
    54.                 pointFormat: '月累计创收: <b>{point.y:.1f} 元</b>'
    55.             },
    56.             series: [{
    57.                 name: 'Population',
    58.                 data: [
    59.                     ['骏景', 27887],
    60.                     ['南洲', 13060],
    61.                     ['汇景', 23135],
    62.                     ['金钟', 21619],
    63.                     ['增城', 19096],
    64.                     ['华南', 18550],
    65.                     ['美林', 18119],
    66.                     ['中海', 47972],
    67.                     ['凤凰城', 23112],
    68.                     ['万科城', 16840],
    69.                     ['东方', 18897],
    70.                     ['金沙洲', 21122],
    71.                     ['淘金', 18112],
    72.                     ['富力半岛', 17866],
    73.                     ['革新路', 16842]

    74.                 ],

    75.             }]
    76.         });
    77.     });
    78.     </script>
    79.     <div id="container2" style=" margin:5px 3.2%; width: 1030px; height: 300px; float:left;"></div>
    80.     <script src="/js/highcharts.js"></script>
    81.     </body>

    82. </html>
    复制代码


    点评

    稍后我来答。  发表于 2016-1-13 15:43

    本帖被以下淘专辑推荐:

  • TA的每日心情
    慵懒
    2016-1-15 09:16
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    5

    帖子

    53

    积分

    HC 新手

    Rank: 1

    积分
    53
     楼主| 发表于 2016-1-13 16:18:32 | 显示全部楼层
    群大大 发表于 2016-1-13 16:11
    上面的代码不就是嘛。

    额,怎么运行之后页面没内容显示出来了呢?
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    22709

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2016-1-13 17:32:16 | 显示全部楼层
    SunnyDay 发表于 2016-1-13 16:18
    额,怎么运行之后页面没内容显示出来了呢?

    应该是多余的分号影响,你可以将拼出来的字符串打印出来看看。打印方法可以
    1. <div id="container2" style=" margin:5px 3.2%; width: 1030px; height: 300px; float:left;">
    2. <?=$str ?>
    复制代码

    将打印出来的内容截图贴出来看看。

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    慵懒
    2016-1-15 09:16
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    5

    帖子

    53

    积分

    HC 新手

    Rank: 1

    积分
    53
     楼主| 发表于 2016-1-13 18:32:04 | 显示全部楼层
    群大大 发表于 2016-1-13 17:32
    应该是多余的分号影响,你可以将拼出来的字符串打印出来看看。打印方法可以

    将打印出来的内容截图贴出来 ...

    找到原因了,就是因为符串少加了分号,所以在页面显示不出来。 非常感谢您 的帮助- - O(∩_∩)O谢谢!
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    22709

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2016-1-13 15:51:58 | 显示全部楼层
    很简单,直接将拼好的字符串打印到 Highcharts 配置部分就好了,针对你现在的需求只需要改动一点点就行了。
    1. <?php
    2.     $conn=mysql_connect('127.0.0.1','liu','') or die("链接数据库失败!");
    3.     mysql_select_db('test') or die("选择数据库失败");
    4.     mysql_query('set names utf8');
    5.     $sql="select * from `web_index`";
    6.     $res=mysql_query($sql);
    7.     while($rows = @mysql_fetch_assoc($res)){
    8.         $str .= "[".$rows['name'].",".$rows['yye']."],";
    9.     }
    10.     $str = trim($str,".,");

    11.     $str = '['.$str.']';

    12.     // echo $str;
    13. ?>
    14. <!DOCTYPE html >
    15. <html xmlns="http://www.w3.org/1999/xhtml">

    16. <head>
    17.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    18.     <title>网格管理</title>
    19.     <link rel="stylesheet" type="text/css" href="/css/buju2.css">
    20.     <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    21.     <style type="text/css">
    22.     $ {
    23.         demo.css
    24.     }
    25.     </style>
    26.     <script type="text/javascript">
    27.     $(function() {

    28.         $('#container2').highcharts({
    29.             chart: {
    30.                 type: 'column'
    31.             },
    32.             title: {
    33.                 text: '月累计创收统计图'
    34.             },
    35.             xAxis: {
    36.                 type: 'category',
    37.                 labels: {
    38.                     rotation: 0,
    39.                     style: {
    40.                         fontSize: '13px',

    41.                         fontFamily: 'Verdana, sans-serif',
    42.                     }
    43.                 }
    44.             },
    45.             yAxis: {
    46.                 min: 0,
    47.                 title: {
    48.                     text: '       '
    49.                 }
    50.             },
    51.             legend: {
    52.                 enabled: false
    53.             },
    54.             tooltip: {
    55.                 pointFormat: '月累计创收: <b>{point.y:.1f} 元</b>'
    56.             },
    57.             series: [{
    58.                 name: 'Population',
    59.                 data: <?=$str ?>    // 将 php 拼好的字符串打印到这里就行了

    60.             }]
    61.         });
    62.     });
    63.     </script>
    64.     <div id="container2" style=" margin:5px 3.2%; width: 1030px; height: 300px; float:left;"></div>
    65.     <script src="/js/highcharts.js"></script>
    66.     </body>

    67. </html>
    复制代码


    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    慵懒
    2016-1-15 09:16
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    5

    帖子

    53

    积分

    HC 新手

    Rank: 1

    积分
    53
     楼主| 发表于 2016-1-13 16:09:10 | 显示全部楼层
    群大大 发表于 2016-1-13 15:51
    很简单,直接将拼好的字符串打印到 Highcharts 配置部分就好了,针对你现在的需求只需要改动一点点就行了。 ...

    能写一个简单的拼接字符串,打印到DATA的实例吗 - -谢谢!
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    22709

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2016-1-13 16:11:42 | 显示全部楼层
    SunnyDay 发表于 2016-1-13 16:09
    能写一个简单的拼接字符串,打印到DATA的实例吗 - -谢谢!

    上面的代码不就是嘛。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

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

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