0

我对 jQuery 浮点数有疑问。

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 问题

4

2 回答 2

3

我将分享一个带有 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>

        });

步骤完成。

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

在 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
于 2016-09-18T17:50:22.347 回答
2

您收到了一个不符合 JSON 数据条件的字符串。然后你把它分成两个字符串，仍然不是 JSON。然后你试图plot用data: your_string_value. 这里plot等待一个对象，而不是字符串。尝试以这种方式定义data您的plot：data:$.parseJSON( dataArray1 )

于 2013-04-29T12:03:00.850 回答