Estoy tratando de incluir javascript para mi archivo index.php , el problema es que el javascript está dentro de una extensión de archivo php charts.php y cuando trato de vincular el javascript a mi index.php no funciona, entonces, ¿cómo vinculo los charts.php ? charts.php a index.php ?
He intentado
<script> <?php include_once "../assets/js/charts.php";?> </script>tanto como
<script src="../assets/js/charts.php"></script>ambos de los cuales no funcionan.
gráficos de charts.php
<!-- Gender stats of user --> <script type=''> var options = { chart: { height: 320, type: 'pie', }, <?php echo "series: [$gender[0],$gender[1],$gender[2]],"?> labels: ['Male','Female','Not specify'], legend: { show: true, position: 'bottom', horizontalAlign: 'center', verticalAlign: 'middle', floating: false, fontSize: '14px', offsetX: 0, offsetY: 7 }, responsive: [{ breakpoint: 600, options: { chart: { height: 240 }, legend: { show: false }, } }] } var chart = new ApexCharts( document.querySelector("#gender-pie-user"), options ); chart.render(); </script> Si bien charts.php tiene una extensión de archivo php, es principalmente Javascript con algunas variables php de mi base de datos. Debo señalar que si incluí el código charts.js directamente dentro de index.php, funciona.
por ejemplo, esto funciona:
// index.php <script type=''> var options = { chart: { height: 320, type: 'pie', }, <?php echo "series: [$gender[0],$gender[1],$gender[2]],"?> labels: ['Male','Female','Not specify'], legend: { show: true, position: 'bottom', horizontalAlign: 'center', verticalAlign: 'middle', floating: false, fontSize: '14px', offsetX: 0, offsetY: 7 }, responsive: [{ breakpoint: 600, options: { chart: { height: 240 }, legend: { show: false }, } }] } var chart = new ApexCharts( document.querySelector("#gender-pie-user"), options ); chart.render(); </script>Si bien esto no funciona:
// index.php <script src='../assets/js/charts.php'></script><?php require __DIR__ . "/../assets/js/charts.php";?> Es el que debería estar funcionando. Cámbielo a requerido para ver si la ruta se puede resolver. También recomendaría comenzar con __DIR__ : haga que la ruta sea absoluta.
PHP no genera contenido de forma predeterminada. Así que cuando haces esto:
<script> <?php include_once "../assets/js/charts.php";?> </script>en realidad solo incluye el contenido de charts.php en la memoria, pero nunca lo genera.
Es más probable que funcione algo como esto:
<script> <?php echo require("../assets/js/charts.php");?> </script>Un enfoque alternativo sería guardar sus datos php dinámicos en un atributo de datos html como este:
<?php $gender_arr =[ 'male', 'female', 'not_specify' ]; ?> <div id="gender-pie-user" data-series='<?php echo json_encode($gender_arr);?>'></div>Salida de ejemplo:
<div id="gender-pie-user" data-series='["male","female","not_specify"]'></div>De esta manera, podría guardar el script de inicio de su gráfico como un archivo js estático:
let genderPie = document.querySelector("#gender-pie-user"); // render chart if #genderPie element exists if(genderPie){ let genderPieSeries = genderPie.getAttribute('data-series'); var options = { chart: { height: 320, type: 'pie', }, //parse data attribute series: JSON.parse(genderPieSeries), labels: ['Male','Female','Not specify'], legend: { show: true, position: 'bottom', horizontalAlign: 'center', verticalAlign: 'middle', floating: false, fontSize: '14px', offsetX: 0, offsetY: 7 }, responsive: [{ breakpoint: 600, options: { chart: { height: 240 }, legend: { show: false }, } }] } var chart = new ApexCharts( genderPie, options ); chart.render(); }De esta manera, puede reutilizar fácilmente su función de inicialización para diferentes vistas de datos de gráficos y beneficiarse del almacenamiento en caché de archivos js estáticos.