Question

我遇到了jQuery flot的问题。

PHP输出（不是JSON）：

[[1, 153], [2, 513], [3, 644]] ~~ [[1, 1553], [2, 1903], [3, 2680]]

jQuery调用：

$.ajax({
    url: 'xxx.php',
    success: function (data) {
        var dataArray = data.split('~~'),
        dataArray1 = dataArray[0],
        dataArray2 = dataArray[1],
        plot = $.plot($('#xxx'), [{
            data: dataArray1,
            color: colours[0]
        },
        {
            data: dataArray2,
            color: colours[1],
            points: {
                show: true,
            }
        },
        ], {
            series: {
                bars: {
                    show: true,
                    barWidth: .6,
                    align: 'center'
                }
            },
            grid: {
                show: true,
                hoverable: true,
                clickable: true,
                autoHighlight: true,
                borderWidth: true,
                borderColor: 'rgba(255, 255, 255, 0)'
            },
            xaxis: {
                show: false
            }
        });
    }
});

以这种方式获取数据，我正在尝试使用jQuery Flot但不起作用......

然而，我可以通过分离数据：

第一个标签：

[[1, 153], [2, 513], [3, 644]]

第二个标签：

[[1, 1553], [2, 1903], [3, 2680]]

jQuery Flot Problem

Answer 1

为了基本的理解目的，我将与ajax分享一个简单的例子jquery Flot。

请参阅此页面，然后将其更改为ajax：http://www.jqueryflottutorial.com/making-first-jquery-flot-line-chart.html

首先，您必须成功显示没有ajax的图表。如果不包含css文件，请不要忘记在div标签中放置高度和宽度。：

<div id="flot-placeholder" style="width: 100%; height: 260px"></div>

如果没问题，请按照此步骤进行操作。

步骤1：将脚本放在函数中：

<script> 
   function show_chart(data) {

    // this will be moved to php file
    //var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];

                var dataset = [{label: "line1",data: data}];

                var options = {
                    series: {
                        lines: { show: true },
                        points: {
                            radius: 3,
                            show: true
                        }
                    }
                };

                $(document).ready(function () {
                    $.plot($("#flot-placeholder"), dataset, options);
                });
        }
</script>

第2步：创建sample.php。

<?php
require 'config.php';
if($_POST) 
{
$id      = $_POST['id'];  

$arr = array();

$arr = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];   

echo json_encode($arr);

 }?>

注意：从第一个脚本移出的$ arr然后只变成一个示例数据。你应该创建一个从数据库中获取数据的php类或函数，并以$ arr中所示的数组格式返回。

第3步：创建简单的ajax以获取响应并呈现图表：

       var id = 1;
       $.post('/..if any folder../sample.php', {
        id : id, 
        }, function(response){                  

        var data = JSON.parse(response);

        show_chart(data); // call function and render the chart in <div id="flot-placeholder"></div>

        });

完成步骤。

在某些情况下，我们可能需要两种或更多数据类型。然后将其添加到代码中：

inside sample.php：

$arr1 = array();
$arr2 = array();

$arr1 = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];  
$arr2 = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];  
// put more if rquired

echo json_encode($arr1,$arr2); // put more array if required

在ajax中：

var data = JSON.parse(response);

    var result1 = data[0]; // response data from $arr1
    var result2 = data[1]; // response data from $arr2

很抱歉有详细说明。希望它会有所帮助。

只是为了好玩：

有些人不想在控制台日志中显示“sample.php”。为此，我们可以简单地将'sample'更改为文件夹，并在其中创建index.php，在ajax中我们只需将url定向到这样的文件夹：

$.post('/..if any folder../sample/'), {  // this will open index.php

Answer 2

您收到了一个未被限定为JSON数据的字符串。然后你将它分成两个字符串，仍然不是JSON。然后尝试使用plot实例化data: your_string_value对象。这里plot等待一个对象，而不是字符串。尝试以这种方式定义data的{{1}}：plot

使用jQuery Flot通过AJAX接收数据

2 个答案: