jqPlot：從json定義圖表參數

Question

我想弄清楚是否可以從json文件配置圖表以及如何去做。

讓我們以另一種風格寫下句子：我可以使用json文件傳遞jqPlot數據以繪製圖表和圖表參數嗎？

直到現在我只是用json文件來存儲數據。

有什麼建議嗎？

由於提前， 埃文

Answer 1

可以，這裏是使用AJAX調用的例子：

$.ajax({ 
    url: 'input.json', 
    dataType: 'json', 
    success: function(options) 
    {         
     var data = [ 
     [3, 7, 9, 1, 4, 6, 8, 2, 5], 
     [4, 8, 10, 2, 5, 7, 9, 3, 6], 
     [5, 9, 11, 3, 6, 8, 10, 4, 7], 
     [6, 10, 12, 4, 7, 9, 11, 5, 8], 
     [7, 11, 13, 5, 8, 10, 12, 6, 9]]; 

     var plot = $.jqplot('chart', data, options);     
    }, 
    error: function(jqXHR, textStatus, errorThrown) 
    { 
    alert(textStatus) 
    } 
}); 

這裏的圖表選項是從檢索（在這種情況下）本地JSON文件，它看起來是這樣的：

{ 
"legend": {   
    "show": true, 
    "placement": "outsideGrid", 
    "location": "s", 
    "rendererOptions": { 
     "numberRows": 1 
    } 
}, 
"seriesDefaults": { 
    "showMarker": false, 
    "fill": false 
}} 

然後該地塊照常產生。一個限制（我相信）：如果您想使用自定義渲染器（例如$ .jqplot.DateAxisRenderer），則無法通過JSON指定。

Answer 2

我不知道你們其他人的情況，但我不喜歡這裏的迴應，並決心做出這項工作。我終於成功了，它可以像「$ .jqplot.DateAxisRenderer」一樣工作，沒有任何問題。

在我的情況下，我實際上是從CherryPy應用程序傳遞的東西，我需要能夠將選項作爲JSON傳遞給圖表的數據。我最終將整個選項集作爲字符串傳遞，然後使用EVAL將其更改回JavaScript代碼。一旦我找出它的語法實際上完美的作品。這是使其工作的最佳方式。

1）找出沒有使用任何JSON的所有選項，以確保情節實際正常工作。
2）逐字複製jqPlot的options參數。
3）確保在選項周圍添加圓括號，以便EVAL將正確評估它，否則您將收到語法錯誤。
4）將這整個事情變成服務器端的字符串類型對象。
5）然後這將通過JSON.dumps，因爲它與其餘數據一起返回給客戶端。
6）在客戶端javascript上只對返回的對象執行EVAL，並將結果設置爲您的選項參數。

下面是一個例子：
正如你在這裏看到的，我也在調用選項中的數據渲染器。只要這些選項在客戶端的適當上下文中被調用，它就會評估所有的變量，等等，並且完美地工作。這是工作在jQuery 1.11.0，與jqPlot 1.0.8r1250。

Server對象：

options = """({ 
     dataRenderer: ajaxDataRenderer, 
     dataRendererOptions: { 
      name: name 
     }, 
     axes:{ 
      xaxis:{ 
       label:xLabel, 
       renderer:$.jqplot.DateAxisRenderer, 
       tickOptions:{formatString:'%R'} 
      }, 
      yaxis:{ 
       tickOptions:{ 
        formatString:'%.0f' 
       } 
      } 
     }, 
     legend: { 
      show: true, 
      placement: 'outsideGrid', 
      labels: seriesLabels, 
      location: 'ne', 
      rowSpacing: '0px' 
     }, 
     highlighter: { 
      show: true, 
      sizeAdjust: 7.5 
     }, 
     cursor: { 
      show: true, 
      zoom:true 
     } 
    })""" 

返回到客戶端：

output = json.dumps({ 
        'name': name, 
        'xLabel': header[0], 
        'seriesLabels': header[1:], 
        'parms': parms, 
        'options': options, 
        'parmData': parmData, 
        'successful': True 
        }) 

的Javascript：

var options = eval(incomingData.options); 
var plot = $.jqplot('chart_'+name, "/getChartData", options);