Блог

Главная - Вопросы по программированию - Вызов диаграммы JS с использованием данных PHP (файловой структуры)

Вызов диаграммы JS с использованием данных PHP (файловой структуры)

#php #chart.js

#php #chart.js

Вопрос:

Всем доброго утра, немного затянуто, поэтому я постараюсь быть кратким.

Я экспериментирую с HTML, который вызывает постоянные темы PHP, вместо того, чтобы писать код на каждой странице HTML (php).

Например, home.php выглядит следующим образом:

 <?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">

<head>
    <?php include("includes/head-tag.php");?>
</head>

<body id="page-top">
    <?php include("includes/nav.php");?>

  
  <div id="wrapper">

    <!-- Sidebar -->
    <ul class="sidebar navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li> 
	  <li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
	  <li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
	  <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
	  <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
      <li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
    </ul>


    <div id="content-wrapper">

      <div class="container-fluid">

        <!-- Breadcrumbs-->
        <?php include("includes/breadcrumb.php");?>
		
	    <!-- Card Deck -->
	    <?php include("cards.php");?>


        <!-- DataTables Example -->
        <?php include("charts.php");?>
 

      </div>
      <!-- /.container-fluid -->

      <!-- Sticky Footer -->
	  <?php include("includes/footer.php");?>


    </div>
    <!-- /.content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

  <!-- Logout Modal -->
  <?php include("includes/logout.php");?>

  <!-- Scripts -->
  <?php include("includes/scripts.php");?>

</body>
</html>

Вы увидите, что на полпути вниз у меня есть charts.php который является просто HTML для chart.js (тема начальной загрузки) вот так:

 <div class="card mb-4 border-0">		  
        <div class="card-deck">
          <div class="card">
            <div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
            <div class="card-body">
            <canvas id="doughnutChart"></canvas>
            </div>
            <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
            <div class="card-body">
            <canvas id="doughnutChartPho"></canvas>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
            <div class="card-body">
            <canvas id="doughnutChartLap"></canvas>
            </div>
            <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
	    </div>

Непосредственно в корневом каталоге (где charts.php есть) У меня есть папка для js/charts/pie.js которая содержит это:

 //doughnut  
  var ctxD = document.getElementById("doughnutChart").getContext('2d');
  var myLineChart = new Chart(ctxD, {
    type: 'doughnut',
    data: {
      labels: <?php echo json_encode($json); ?>,
      datasets: [{
        data: <?php echo json_encode($json2); ?>,
        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
        hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
      }]
    },
    options: {
      responsive: true
    }
  });

и php-код, который я размещаю в верхней части charts.php это:

 $stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
	extract($row);
	$json[]= $type;
	$json2[]= (int)$manufacturer;
}
echo json_encode($json);
echo json_encode($json2);
?>

Эти два эхо-сигнала отображаются на домашней странице страницы в нужном месте (т. Е. непосредственно над первой диаграммой), но диаграмма не отображается. Я подозреваю, что это из-за того, что файлы находятся в разных местах, а не в одном блоке кода.

Могу ли я добавить php-запрос в начало pie.js вместо этого? Если я использую притворные данные в наборе данных и метках, появляется диаграмма.

Комментарии:

1. Could I add the php query to the top of pie.js instead? Нет, если только вы явно не настроили файлы .js для обработки PHP, что обычно не так и, вероятно, не рекомендуется.

Ответ №1:

ChartJS ожидает данные в операторе, разделенном запятыми, таком как:

  data: 5, 7, 8, 9;

Я подозреваю, что json_encode сбивает с толку и предложил бы вам возвращать строки, а не массивы:

 $stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= "";
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
    extract($row);
    $json .= "'".$type."',";
    $json2 .= (int)$manufacturer.",";
}
echo $json; // should be 'Red','Green','Blue' ... 
echo $json2; // should be 5,6,9,4 ... etc 
?>

Комментарии:

1. Хм, интересно, спасибо за это. Я подозреваю, что вы правы. Однако эхо-тест теперь показывает: ‘1’, ‘2’, Array1, 1, а данных диаграммы по-прежнему нет.

2. Можете ли вы показать вывод из «ВЫБЕРИТЕ тип, производителя ИЗ asset_details»?

3. Конечно, я понимаю это: введите производителя 1 1 2 1

4. это, похоже, не согласуется с предыдущим выводом, но попробуйте изменить вторую строку на json2 .= $manufacturer.",";

5. Извините за поздний ответ. Последние несколько дней мне нездоровилось. Я ценю вашу помощь, но, похоже, это все еще не работает. Я вижу, что эхо-сигналы ведут себя корректно в той мере, в какой я получаю ‘ ‘ и , , между данными. У меня также есть уведомление: преобразование массива в строку в строке 9, которая является $ json2 .= $manufacturer.»,»;