從遠程JSON填充Jqplot

Question

我想從PHP文件中的外部JSON填充條形圖。我試圖使用AJAX和getJSON函數來執行此操作，但仍未能生成圖表。

這裏是我的JSON格式的樣子如何：

[ 
    { 
     "NAME": "a chart", 
     "VALUES": "[[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]]" 
    } 
] 

這裏是JavaScript：

$(document).ready(function() { 
     urlDataJSON = 'data.php'; 

    $.getJSON(urlDataJSON, function (data) { 

     console.log(data.output); 

     var dataLabels = ['base', 'key', 'pacing', 'emerging']; 
     var dataLines = json[0].VALUES; 
     var chartTitle = json[0].NAME; 


     $.jqplot('chart2', dataLines, { 
      legend: { 
       show: true 
      }, 
      title: chartTitle, 
      seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, 
       pointLabels: { 
        show: true, 
        location: 'e', 
        edgeTolerance: -15 
       }, 
       shadowAngle: 135, 
       renderOptions: { 
        barDirection: 'horizontal' 
       } 
      }, 
      axes: { 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        ticks: dataLabels 
       } 
      } 
     }); 
    }); 

。你們知道什麼地方錯了我上面的代碼？如果有什麼請讓我知道。

---

編輯：更新代碼

  var urlDataJSON = 'data.php'; 
/*    var json = [{ 
        "Name": "Poll Results", 
        "Serie": [[2, 5, 4], [4, 1, 7], [6, 3, 1], [3, 4, 2]]}];*/ 
      $.getJSON(urlDataJSON, function (data) { 

       console.log(data); 

       var tick = ['asd','fsdf','asda','fdsf',]; 
       var dataLines = []; 
       var title = []; 

       $.each(data, function (entryindex, entry) { 
        dataLines.push(entry['VALUES']); 
        title.push(entry['NAME']); 
       }); 

       var options = { 
        legend: { 
         show: true 
        }, 
        title: 'Poll Results', 
        seriesDefaults: { 
         renderer: $.jqplot.BarRenderer, 
         pointLabels: { 
          show: true, 
          location: 'e', 
          edgeTolerance: -15 
         }, 
         shadowAngle: 135, 
         renderOptions: { 
          barDirection: 'horizontal' 
         } 
        }, 
        axes: { 
         xaxis: { 
          renderer: $.jqplot.CategoryAxisRenderer, 
          ticks: tick 
         } 
        } 
       }; 
       var plot = $.jqplot('chart2', [dataLines], options); 
      }); 

我已經把。每個（）函數將數據推入的陣列。現在，圖表是空的。只顯示背景。

Answer 1

$(document).ready(function() { 

    $.getJSON('data.php', function (data) { 

     var tick = ['asd','fsdf','asda','fdsf']; 

     var options = { 
      legend: { 
       show: true 
      }, 
      title: 'Poll Results', 
      seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, 
       pointLabels: { 
        show: true, 
        location: 'e', 
        edgeTolerance: -15 
       }, 
       shadowAngle: 135, 
       renderOptions: { 
        barDirection: 'horizontal' 
       } 
      }, 
      axes: { 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        ticks: tick 
       } 
      } 
     }; 
     var plot = $.jqplot('chart2', data[0].VALUES, options); 
    }); 
}); 

確保包括這些插件

<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script> 
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script> 
<script type="text/javascript" src="../src/plugins/jqplot.pointLabels.min.js"></script> 

這是我data.php

$arr = [ 
    "NAME" => "a chart", 
    "VALUES" => [[439, 233, 233, 495],[292, 360, 262, 173],[222, 95, 27, 27]] 
]; 

header('Content-Type: application/json'); 
print json_encode([$arr]);