通過AJAX使用jQuery接收數據Flot

我有一個jQuery flot的問題。通過AJAX使用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海軍報，但不工作...

而我可以通過分離數據：

首先標籤：

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

第二個標籤：

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

jQuery Flot Problem

來源

2013-04-29 Metin METE

你收到一個字符串，沒有資格作爲JSON數據。然後你將它分解爲兩個字符串，它們仍然不是JSON。然後，您嘗試使用data: your_string_value實例化plot對象。這裏plot等待一個對象，而不是字符串。嘗試定義您plot這樣data：data:$.parseJSON(dataArray1)

來源

2013-04-29 12:03:00 zeliboba

'語法錯誤：JSON.parse：意外的字符'返回了錯誤。 – 2013-04-29 12:08:04

檢查您的字符串。它的工作原理： http://jsfiddle.net/qCPsY/ – zeliboba 2013-04-29 12:14:28

感謝您的關注。我的問題是（'）的性格。曾與（「）。再次感謝.. – 2013-04-29 13:36:20

我將與阿賈克斯的基本理解的目的共享一個簡單的例子jQuery的海軍報。

看到這個頁面，讓它變成阿賈克斯：http://www.jqueryflottutorial.com/making-first-jquery-flot-line-chart.html

首先，你必須顯示爲沒有Ajax描述圖表成功。不要忘了把高度和寬度div標籤，如果你不包括CSS文件：

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

     });

步驟完成。

在某些情況下，我們可能需要兩個或更多數據類型。然後，只需將其添加到代碼中：

內部示例。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」在控制檯日誌。爲此，我們可以簡單地改變「樣本」的文件夾，並創建裏面的index.php，並在阿賈克斯我們只是直接鏈接到這樣的文件夾：

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

來源

2016-09-18 17:50:22

通過AJAX使用jQuery接收數據Flot

回答

相關問題