如何使用从MySQL数据库获取的数据绘制高位图

问题描述：

我想使用从MySQL数据库获得的值绘制高位图。我从数据库中获得价值并成功编码为jason，但高层图不出来，你能帮我吗？如何使用从MySQL数据库获取的数据绘制高位图

==== 2016年10月5日更新====

我添加JSON_NUMERIC_CHECK我json_encode函数来解析字符串到数字类型，但仍然不能正确显示highcharts，你可以帮助我？

==== 2016年10月6日更新====

我在这里上传我的结果的截图显示，我是真的有我的数据的右JSON格式从我的Apache服务器了。左边部分是我的代码，突出显示的第25行显示了我的截图的右侧部分。你可以看到我从json格式数据库解析的结果是[3,2,6,9,5]。为什么我的网页下面没有高位图？

截图这里↓↓↓↓↓

数据库↓

CREATE TABLE `db` (
    `name` varchar(2) DEFAULT NULL, 
    `status` varchar(6) DEFAULT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=utf8; 

INSERT INTO `db` (`name`, `status`) VALUES 
('dd', 'done'), 
('ee', 'done'), 
('dd', 'done'), 
('aa', 'done'), 
('cc', 'done'), 
('ee', 'done'), 
('cc', 'done'), 
('dd', 'done'), 
('cc', 'done'), 
('ee', 'done'), 
('bb', 'done'), 
('dd', 'done'), 
('ee', 'done'), 
('cc', 'done'), 
('dd', 'done'), 
('dd', 'done'), 
('dd', 'done'), 
('ee', 'done'), 
('cc', 'done'), 
('cc', 'change'), 
('aa', 'change'), 
('aa', 'change'), 
('dd', 'change'), 
('bb', 'change'), 
('dd', 'change');

的index.php↓

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
</head> 
<body> 

    <h2 align="center">INDEX</h2> 



<form action="highcharts.php"> 
    <input type="submit" name="submit_schedule" value="View_highcharts"> 
</form> 

</body> 
</html>

highcharts.php↓

个

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!--invoke jquery first then highcharts libraries when you use highcharts to draw the plot.--> 
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script> 
    <script type="text/javascript" src="highcharts.js"> <!--put .js file in c:\xampp\htdocs--> 
</script> 

</head> 

<body> 
    <h2 align="center">HighCharts.js demo</h2> 

    <?php 
    echo "JSON WORKS↓↓↓<br><br>"; 
    $sth = mysqli_query(new mysqli("localhost","root","","ask"), "select distinct name, count(status) as number from db group by name"); 
    $rows = array(); 
    while($r = mysqli_fetch_assoc($sth)) { 
     $rows[] = $r['number']; 
    } 
    json_encode($rows); 
    $rows_json = json_encode($rows, JSON_NUMERIC_CHECK); 
    print "this line is rows_json: $rows_json"; 
    echo "<br><br>JSON WORKS↑↑↑"; 
    ?> 

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
</body> 
</html>

highcharts.js↓

$(function() { 
    $.getJSON('highcharts.php', function(data) { 
      $("#container").highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'js_demo' 
      }, 
      xAxis: { 
       categories: ['aa', 'bb', 'cc', 'dd', 'ee'] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'number of count' 
       }, 
       stackLabels: { 
        enabled: true, 
        style: { 
         fontWeight: 'bold', 
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
        } 
       } 
      }, 
      legend: { 
       align: 'right', 
       x: -30, 
       verticalAlign: 'top', 
       y: 25, 
       floating: true, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
       borderColor: '#CCC', 
       borderWidth: 1, 
       shadow: false 
      }, 
      tooltip: { 
       headerFormat: '<b>{point.x}</b><br/>', 
       pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
         style: { 
          textShadow: '0 0 3px black' 
         } 
        } 
       } 
      }, 
      series: [{ 
       name: 'done', 
       data: data 
      }] 
     }); 
    }); 
});

数据怎么样子？你有正确的Highcharts格式吗？ –

从数据库得到并编码成json后，它看起来像：[“3”，“2”，“6”，“9”，“5”] – swchen

因此，你有字符串而不是数字？也许试图解析他们的数字？ –

答

，我发现我的问题的一个解决方案：

只是删除这一行：

$ .getJSON（“highcharts .php'，function（data）{}
设置变量从php获取，放在<head>标记下。
粘贴JS代码下<head>标签，而不是调用highcharts.js到highcharts.php
呼应变量系列中的对象JS

如何使用从MySQL数据库获取的数据绘制高位图

相关推荐