chart.js с данными JSON на той же странице не отображается - PullRequest
Новая
       11

chart.js с данными JSON на той же странице не отображается

0 голосов
/ 05 июля 2018

Здравствуйте. У меня небольшая проблема с рендерингом диаграммы с использованием chart.js, извлечением данных из базы данных mysql. Он работает, когда я использую внешний файл, для извлечения данных, Однако я пытаюсь кодировать все это на один файл, но это создает некоторые проблемы. Я предполагаю, что данные json_encode не передаются должным образом, код приведен ниже: 

<!DOCTYPE html>
<html>
<head>
<title>Demo Charts</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
</head>
<body>
    <div>
<?php
$conn = mysqli_connect("localhost","root","password","db1");

$sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
mysqli_close($conn);
$json = json_encode($data);
?>
        <div>
            <span><h3>Pie Chart</h3></span>
            <canvas id="pieCanvas"></canvas>
        </div>
        <script type="text/javascript"> 
        $(document).ready(function () {
            showGraph2();
        });

        function showGraph2()
        {
            {
                var data = <?php echo $json; ?>;
               // $.post("api/data.php", `==>>THIS WORKS`
             $.post(data,
                function(data)
                {
                    console.log(data);
                     var name = [];
                    var marks = [];
                    var coloR = [];

                     var dynamicColors = function() {
                    var r = Math.floor(Math.random() * 255);
                    var g = Math.floor(Math.random() * 255);
                    var b = Math.floor(Math.random() * 255);
                    return "rgb(" + r + "," + g + "," + b + ")";
                 };


                    for (var i in data) {
                        name.push(data[i].student_name);
                        marks.push(data[i].marks);
                         coloR.push(dynamicColors());
                    }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                //borderColor: '#46d5f1',
                                backgroundColor: coloR,
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#pieCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'pie',
                        data: chartdata
                    });
                });
            }
        } 
         showGraph2();


</script>

    </div> 

</body>
</html>

1 Ответ

0 голосов
/ 05 июля 2018

Вот соответствующая часть JavaScript: 

const useAJAX = false;

$(document).ready(function () {
  if (useAJAX) $.getJSON('api/data.php').then(showGraph);
  else showGraph(<?= $json ?>);
});

function showGraph(data) {
  console.log(data);
  var name = [];
  var marks = [];
  var coloR = [];
  // etc, etc
}

Я полностью разделил а) получение данных и б) обработку данных. Таким образом, вы можете переключаться между ними.

Я непосредственно вставил JSON в скрипт, как вы сделали. Не супер чистая или хорошая практика, но пока будет работать нормально.

Я слегка переписал часть AJAX, вместо этого я использую $.getJSON, предполагая, что файл все равно не требует никаких параметров POST. И я использовал .then(), пользуясь тем, что методы jQuery AJAX возвращают Promises .

Последний совет: не смешивайте PHP и HTML / JS таким образом. Переместите все свои PHP-компоненты в самый верх, установите все свои переменные перед первым эхо / простым текстом. Затем используйте ?><!DOCTYPE html> для перехода к HTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...