Question

第一次发布海报，对javascript仍然比较新...我试图弄清楚如何将信息从php文件反映到canvasjs文件。

<script src="http://canvasjs.com/assets/script/canvasjs.min.js">    </script>
<script type="text/javascript">

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        title:{
            text: "My First Chart in CanvasJS"              
        },
        data: [              
        {
            type: 'line',
            dataPoints: [
                { label: "2014/1/2",  y: 60,  x: 2  },
            ]
        },              
        {
            type: 'line',
            dataPoints: [
                 { label: "2014/1/2",  y: 0,  x: 2  },
            ]
        }
        ]
    });
    chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

而不是标签和数据点等，我想要收集来自php文件的信息（或如何对任何类型的文件进行处理）然后显示在这个canvasjs文件中。

有办法做到这一点吗？

对不起，如果我不清楚，我真的很感激我能得到的任何帮助：）

谢谢！

Answer 1

一种方法是将文件粘贴到PHP文件中，然后在其中使用PHP：

<?php

$dataPoints = [ [ "label" => "2014/1/2",  y => 0,  x => 2 ] ];

?>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js">    </script>
<script type="text/javascript">

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "My First Chart in CanvasJS"              
        },
        data: [              
            {
                type: 'line',
                dataPoints: <?php echo json_encode($dataPoints) ?>
            },              
            {
                type: 'line',
                dataPoints: <?php echo json_encode($dataPoints) ?>
            }
        ]
    });
    chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

另一种方法是创建一个返回数据的PHP文件，并发出一个AJAX请求：

<强> data.php ：

<?php

$dataPoints = [ [ "label" => "2014/1/2",  y => 0,  x => 2 ] ];

echo json_encode($dataPoints);

<强> ui.html ：

<script src="http://canvasjs.com/assets/script/canvasjs.min.js">    </script>
<script type="text/javascript">

window.onload = function () {
    var request = new XMLHttpRequest();

    request.onload = function () {
        var dataPoints = JSON.parse(request.responseText);

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "My First Chart in CanvasJS"              
            },
            data: [              
                {
                    type: 'line',
                    dataPoints: dataPoints
                },              
                {
                    type: 'line',
                    dataPoints: dataPoints
                }
            ]
        });
        chart.render();
    };

    request.open('GET', 'data.php', true);
    request.send();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

如何将php文件调用到canvasjs

1 个答案: