Wie zeichne ich die highcharts unter Verwendung der Daten aus der MySQL-Datenbank

-1

Ich möchte eine Highcharts zeichnen, indem Sie den Wert von MySQL-Datenbank erhalten. Ich bekomme den Wert von Datenbank und encode in jason erfolgreich, aber die highcharts kommen nicht auf, können Sie mir helfen?Wie zeichne ich die highcharts unter Verwendung der Daten aus der MySQL-Datenbank

==== 2016.10.05 Update ====

ich hinzufügen JSON_NUMERIC_CHECK in meiner json_encode Funktion, um die Zeichenfolgen in numerischen Typ zu analysieren, kann aber immer noch nicht die highcharts korrekt anzeigen, können Sie helfen mich?

==== 2016.10.06 Update ====

ich den Screenshot von meinem Ergebnis laden hier zu zeigen, dass ich wirklich das richtige Format json meiner Daten haben, die von meinem Apache-Server erhalten. Der linke Teil ist mein Code, die hervorgehobene Zeile 25 zeigt mein Ergebnis im rechten Teil meines Screenshots. Sie können sehen, das Ergebnis, das ich aus der Datenbank im JSON-Format analysiere ist [3,2,6,9,5]. Warum gibt es keine Highcharts unterhalb meiner Webseite?

Screenshot hier ↓↓↓↓↓

Datenbank ↓

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

Quelle

2016-10-04 swchen

Wie Sie Ihre Daten aussieht? Hast du das richtige Highcharts-Format? –

Nach dem Holen von der Datenbank und dem Kodieren in json, sieht es wie aus: ["3", "2", "6", "9", "5"] – swchen

So haben Sie Zeichenketten anstelle von Zahlen? Vielleicht versuchen, sie zu Zahlen zu analysieren? –

ich eine Lösung meiner Frage gefunden:

entfernen Sie diese Zeile:

$ .getJSON ('highcharts .php ', Funktion (Daten) {}
setzen Sie die Variable get von PHP, setzen Sie es unter Tag.
die js Code unter <head> Tag einfügen statt aufrufen highcharts.js in highcharts.php
die Variable in der Serie Objekt in js echo

Quelle

2016-10-13 07:40:35 swchen

Wie zeichne ich die highcharts unter Verwendung der Daten aus der MySQL-Datenbank

Antwort

Verwandte Themen