Question

我的问题如下：

我正尝试使用AJAX和JQuery动态填充Google曲线图，以从我拥有的PHP文件中检索数据，该文件进行一些数据分析计算，例如移动平均值。我设法动态填充图表，但数据与我的计算不匹配，例如：

这些是我想在图表中进行的计算。

这是我正在处理的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>
<body>

    <div id="curve_chart" style="width: 1200px; height: 1200px"></div>

    <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('string', 'Periodo');
            dataTable.addColumn('number', 'PMS');
            dataTable.addColumn('number', 'PMD');
            dataTable.addColumn('number', 'PMDA');
            dataTable.addColumn('number', 'PTMAC');

            var rows = [];

            var column = 1;
            var urls = [
                "http://localhost:80/dss/calculo.php?x=periodo",
                "http://localhost:80/dss/calculo.php?x=calculaPMS",
                "http://localhost:80/dss/calculo.php?x=calculaPMD",
                "http://localhost:80/dss/calculo.php?x=calculaPMDA",
                "http://localhost:80/dss/calculo.php?x=calculaPTMAC"
            ]

            $.each(urls, (index, url) => {
                $.ajax({
                    async: false,
                    method: "get",
                    url: url,
                    success: datos => {
                        datos = JSON.parse(datos);
                        //console.log(datos)

                        $.each(datos, (index, dato) => {
                            if(column == 1)
                                rows.push([dato]);
                            else
                                rows[index].push(dato);

                        });
                        if(column == urls.length){
                            $.each(rows, (index, row)=>{
                            while(row.length < urls.length)
                                row.push(null);
                        })

                        dataTable.addRows(rows);
                        console.log(rows);

                            var options = {
                                interpolateNulls: true,
                                chart: {
                                    title: "chart"

                                },
                                width: 800,
                                height: 800
                            };

                            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                            chart.draw(dataTable,options);
                        }

                        column++;
                    }
                });

                })
        }
    </script>
</body>
</html>

这是生成图表后的图表：

如您所见，我从表中获取的值未正确放置，而2010年的日期中有不应包含的值。

我该怎么做才能解决此问题？

使用AJAX和JQuery修复动态填充的Google图表上的数据位置

0 个答案: