Question

您好我有javascript的经验，我遇到以下情况我正在开发一个PHP页面来在图表中显示一些值。我正在使用morris.js。

现在，因为morris.js使用以下格式的数组显示为图形：

// AREA CHART
            var area = new Morris.Area({
                element: 'revenue-chart',
                resize: true,
                data: [
                    {y: '2011', purchase: 500, sale: 1000, profit: 500},
                    {y: '2012', purchase: 600, sale: 1100, profit: 500},
                    {y: '2013', purchase: 500, sale: 1050, profit: 550}
                ],
                xkey: 'y',
                ykeys: ['profit', 'purchase', 'sale'],
                labels: ['Profit', 'Purchase', 'Sale'],
                lineColors: ['#a0d0e0', '#3c8dbc', '#ac5bc3'],
                hideHover: 'auto'
            });

但我在php变量中有这些值，如：

$year1 = '2011';
$sale1 = '1000';
$purchase1 = '500';
$profit1 = '500';

$year2 = '2012';
$sale2 = '1200';
$purchase2 = '600';
$profit2 = '500';

$year3 = '2013';
$sale3 = '1050';
$purchase3 = '500';
$profit3 = '550';

如何将这些php值传递给js。我试过了json_encode（），但它不适用于我。

更新：用Luke Cordingley的答案显示更新的代码，仍然有问题。

        <script type="text/javascript">
        window.MyProjectNamespace.phpVars = <?
                $phpVars = array('year' => '2011', 'purchase' => '1000', 'sale' => '600', 'profit' => '400');
                echo json_encode($phpVars);
                ?>
    </script>

    <script type="text/javascript">
        $(function() {

            // AREA CHART
            var area = new Morris.Area({
                element: 'revenue-chart',
                resize: true,
                data: [
                    {y: window.MyProjectNamespace.phpVars.year, purchase: "500", sale: "1000", profit: "500"},
                    {y: "2012", purchase: "600", sale: "1100", profit: "500"},
                    {y: "2013", purchase: "500", sale: "1050", profit: "550"}
                ],
                xkey: 'y',
                ykeys: ['profit', 'purchase', 'sale'],
                labels: ['Profit', 'Purchase', 'Sale'],
                lineColors: ['#a0d0e0', '#3c8dbc', '#000000'],
                hideHover: 'auto'
            });
    });

Answer 1

您需要动态生成您的javascript，或者根据我的喜好，创建一个与我的PHP变量对应的JavaScript对象。将PHP变量转换为JavaScript后，只需根据需要将它们传递给任何JavaScript方法即可。以下是如何在JavaScript中获取PHP变量的示例：

<script type="text/javascript">
    $(function() {
         window.MyProjectNamespace = {};
         window.MyProjectNamespace.phpVars = <?php
            $phpVars = array('year' => '2011', 'purchase' => '1000', 'sale' => '600', 'profit' => '400');
            echo json_encode($phpVars);
            ?>;

        // AREA CHART
        var area = new Morris.Area({
            element: 'revenue-chart',
            resize: true,
            data: [
                {y: window.MyProjectNamespace.phpVars.year, purchase: "500", sale: "1000", profit: "500"},
                {y: "2012", purchase: "600", sale: "1100", profit: "500"},
                {y: "2013", purchase: "500", sale: "1050", profit: "550"}
            ],
            xkey: 'y',
            ykeys: ['profit', 'purchase', 'sale'],
            labels: ['Profit', 'Purchase', 'Sale'],
            lineColors: ['#a0d0e0', '#3c8dbc', '#000000'],
            hideHover: 'auto'
        });
    });
</script>

Answer 2

您应该在javascript中使用ajax从服务器端获取变量。

如果你使用jquery：

 $.ajax({
     type     : "POST",
     url      : "get_my_Variable.php",
     dataType: "json",
     data     : {hello:'i`m'},
     success : function(msg) {
         // here u get your variables
     },
     complete : function(r) {
     },
     error:    function(error) {
     }
 });

在服务器端：

 if(isset($_POST['hello'])){
    echo json_encode($myVariables);
 }

将php变量传递给morris.js

2 个答案: