如何使用從MySQL數據庫獲取的數據繪製高位圖

-1

我想使用從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 
      }] 
     }); 
    }); 
});

來源

2016-10-04 swchen

數據怎麼樣子？你有正確的Highcharts格式嗎？ –

從數據庫得到並編碼成json後，它看起來像：[「3」，「2」，「6」，「9」，「5」] – swchen

因此，你有字符串而不是數字？也許試圖解析他們的數字？ –

，我發現我的問題的一個解決方案：

只是刪除這一行：

$ .getJSON（「highcharts .php'，function（data）{}
設置變量從php獲取，放在<head>標記下。
粘貼JS代碼下<head>標籤，而不是調用highcharts.js到highcharts.php
呼應變量系列中的對象JS

來源

2016-10-13 07:40:35 swchen

如何使用從MySQL數據庫獲取的數據繪製高位圖

回答

相關問題