Question

我有一个js文件包含以下代码：

var BlankonDashboard = function () {

return {

    // =========================================================================
    // CONSTRUCTOR APP
    // =========================================================================
    init: function () {
        BlankonDashboard.visitorChart();
    },

    // =========================================================================
    // VISITOR CHART & SERVER STATUS
    // =========================================================================
    visitorChart: function () {
        if($('#visitor-chart').length){
            $.plot("#visitor-chart", [{
                label: "Vente Année N",
                color: "rgba(0, 177, 225, 0.35)",
                data: [
                    ["Jan", 420],
                    ["Fév", 532],
                    ["Mar", 367],
                    ["Avr", 245],
                    ["Mai", 674],
                    ["Jui", 897],
                    ["Juil", 745]
                ]
            }, {
                label: "Vente Année N-1",
                color: "rgba(233, 87, 63, 0.36)",
                data: [
                    ["Jan", 362],
                    ["Fév", 452],
                    ["Mar", 653],
                    ["Avr", 756],
                    ["Mai", 670],
                    ["Jui", 352],
                    ["Juil", 243]
                ]
            }], {
                series: {
                    lines: { show: false },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 2,
                        fill: 0.5
                    },
                    points: {
                        show: true,
                        radius: 4
                    }
                },
                grid: {
                    borderColor: "transparent",
                    borderWidth: 0,
                    hoverable: true,
                    backgroundColor: "transparent"
                },
                tooltip: true,
                tooltipOpts: { content: "%x : %y" + " People" },
                xaxis: {
                    tickColor: "transparent",
                    mode: "categories"
                },
                yaxis: { tickColor: "transparent" },
                shadowSize: 0
            });
        }
    },
};

}();

// Call main app init
BlankonDashboard.init();

使用静态数据绘制图表的visitorChart函数但是我想用php做动态，我不知道我是否可以将php数据迁移到js文件（file.js），但是如果我可以将php数据迁移到我觉得这个功能（visitorChart）会走路。

Answer 1

您需要为此创建一个Ajax请求：

在PHP中构建一个JSON，其中包含您需要在其中接收的信息图
创建指向构建的URL的Ajax调用（get） JSON
将JSON对象注入到您的代码中 $.plot("#visitor-chart", [ data ]);

那应该是它：）

当然，您需要确保JSON完全采用与图表预期相同的格式。

）

Answer 2

有两种方法可以做到这一点。第一种方式运行稍快，但第二种方式可以在js更新数据而不重新加载页面时一次又一次地运行。

方式1：在导入此js的php文件的开头某处使用以下代码：

<script>
    var data = <?php echo [your serialized data here] ?>
</script>

请注意，如果您在多个文件中导入此js，您可以创建一个单独的php文件并将其包含在任何地方。

方式2：

创建一个对您的数据执行JSON序列化的php。还要让用户在标题中提到文件类型为json。那就是：header('Content-Type: application/json');

然后在你的js文件中，无论你需要数据，只需写

$.getJSON("yourfile.php", {parameter1: value1, parmeter2: value2}, function(data){
    console.log(data);
});

在HTML中调用JS函数

2 个答案: