2016-10-04 12 views
-1

MySQLデータベースから取得した値を使用してハイチャートを描画します。私はデータベースからの価値を得て、jasonにうまくコード化しますが、ハイチャートは出てこないのですか?MySQLデータベースから取得したデータを使用してハイチャートを描画する方法

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

私は数値型に文字列を解析するために、私のjson_encode関数でJSON_NUMERIC_CHECKを追加し、それでも正しくhighchartsを表示することはできません、あなたは助けることができます私?

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

私は本当に私のApacheサーバから得た私のデータの右JSON形式を持っていることを示すために、ここに私の結果のスクリーンショットをアップロードします。左の部分が私のコードです。ハイライトされた25行目は私のスクリーンショットの右の部分に私の結果を示しています。 json形式のデータベースから解析した結果が[3,2,6,9,5]であることがわかります。私のウェブページの下にハイチャートがないのはなぜですか?

スクリーンショットここ↓↓↓↓↓ enter image description here

データベース↓

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 
      }] 
     }); 
    }); 
}); 
+0

に直列オブジェクトに変数をエコー?ハイチャートフォーマットが正しいですか? –

+0

データベースから取得してjsonにエンコードした後、["3"、 "2"、 "6"、 "9"、 "5"] – swchen

+0

数字の代わりに文字列がありますか?多分数にそれらを解析しようとする? –

答えて

0

私は私の質問の解決策を見つけた:

  1. ちょうどこのラインREMOVE:

    $ .getJSON( 'highchartsを.php '、function(data){}

  2. 変数をPHPから取得し、<head>タグの下に置きます。

  3. highcharts.php

  4. に代わりに呼び出しhighcharts.jsの<head>タグの下のJSコードを貼り付けるには、JSデータがどのように見えるか

関連する問題