首页 > 解决方案 > 如何将 php 变量传递给 .js 文件以创建函数 Chart

问题描述

我已经创建了我的图表,但我不知道如何传递它,我已经尝试使用?php 但它不起作用.. 我已经在下面定义了头部,但是当我尝试传递它时。返回“''”的 php 文件,如函数工具提示标题

<script src="includes/templates/chart.js"></script>

图表.js


window.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['08:00'] , //Jamnya
                datasets: [{
                    backgroundColor: 'rgba(85, 212, 226, 0.2)',
                    borderColor: '#55d4e2',
                    label: '<?php echo $dtDateChart1; ?>' ,
                    data: [600],
                    fill: true,
                    pointRadius: 5,
                    pointHoverRadius: 10,
                    showLine: true
                }]
            }, options: {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: 'Total Online Today',
                    position: 'top',
                    fontSize: 15,
                    fontStyle: 'bold'
                },
                legend: {
                    display: false
                },
                elements: {
                    point: {
                        pointStyle: 'circle'
                    }
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'TIME'
                        },
                        ticks: {
                            major: {
                                fontStyle: 'bold',
                                fontColor: '#FF0000'
                            }
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'TOTAL ONLINE'
                        }
                    }]
                },
                tooltips:{
                    callbacks: {
                        title: function(tooltipItem, data) {
                          return '<?php echo $dtDateChart1; ?>' +data['labels'][tooltipItem[0]['index']];
                        },
                        label: function(tooltipItem, data) {
                          return 'TOTAL : '+data['datasets'][0]['data'][tooltipItem['index']]+'';
                        },
                    },
                    titleFontSize: 15,
                    bodyFontSize: 15,
                    displayColors: false
                }
            }
        }
     );

     return myChart;

}  

在我的 php 文件中

$out .=  '         <canvas id="myChart2" class="canpas chartjs-render-monitor" style="display: block; width: 454px; height: 300px;" width="454" height="300"></canvas>';

这是我想传递给我的 .js 的变量

         //result chart1
            @mssql_free_result($graph_query2);
            $dtDateChart1 = $dateTittleChart1;
            $convertChart1 = json_encode($datesChart1);
            $totalChart1 = json_encode($nMaxChart1);
            $labelChart1 =  $convertChart1;

当我已经成功 getelementbyid 时,我不知道如何通过它,如果你知道一些我应该知道的事情,谢谢你。我对javascript传递变量了解不多。

标签: javascriptphphtml

解决方案


您不应该在 js 文件中包含 php 代码。

你可以做的是:

  1. 在 php 文件中,将您需要的值传递给 js 变量。
  2. 然后,使用全局 js 变量或将它们作为参数传递给 js 函数。

或者,不包含单独的charts.js 文件,而是将charts.js 的内容包含在<script>标签内的php 文件中。这样你就可以像你一样拥有 php 和 js。


推荐阅读