JQPlot：繪製來自外部源的系列和標籤

Question

我正在使用JQPlot生成從數據庫中提取數據的圖表，如http://www.jqplot.com/tests/data-renderers.php中的示例。

圖表工作正常，但目前系列標籤是硬編碼的。我怎樣才能讓這張圖表像數據庫一樣顯示數據庫中的系列標籤？我假設我需要撥打一個新電話，第二個包含標籤名稱的文件，但我不確定如何做到這一點。有任何想法嗎？

這裏是我使用的代碼：

$(document).ready(function(){ 
var ajaxDataRenderer = function(url, plot) { 
    var ret = null; 
    $.ajax({ 
     async: false, 
     url: url, 
     dataType:'json', 
     success: function(data) { 
      ret = data; 
     } 
    }); 
    return ret; 
}; 
var jsonurl = "./index.php"; 
$.jqplot.config.enablePlugins = true; 
plot1 = $.jqplot('chart1', jsonurl,{ 
    dataRenderer: ajaxDataRenderer, 
    title: 'Annual Balance Summary', 
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer}, 
    seriesDefaults: {lineWidth:4}, 
    **series:[{label:'Tilikausi 01/2009 - 12/2009'}, {label:'Tilikausi 01/2010 - 12/2010'}, {label:'Tilikausi 01/2011 - 12/2011'}]**, // THIS ARE THE VALUES I WANT TO BRING FROM THE DATABASE 
     showMarker:true, 
     pointLabels: { show:true }, 
    axes: { 
     xaxis: {pad:1, numberTicks:12, tickInterval: 1, autoscale:true, tickOptions:{formatString:'%d', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal'}}}, 
     highlighter: {bringSeriesToFront: true} 
     }); 
}); 

在index.php的outcoming JSON數組，像這樣：

[[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76],[4,409203.91],[5,392167.56],[6,547296.04],[7,529292.86],[8,523009.35],[9,541452.97],[10,535397.58],[11,555497.48],[12,465849.17]],[[0,465849.17],[1,464569.69],[2,468339.1],[3,471005.39],[4,470786.79],[5,472315.46],[6,492847.16],[7,495973.32],[8,520188.21],[9,550497.27],[10,544294.18],[11,559081.4],[12,479558.69]],[[0,479558.69],[1,467694.94],[2,459592.48],[3,476012.25],[4,463623.8],[5,487588.68],[6,445992.44],[7,457935.72],[8,481076.75],[9,498464.53],[10,508681.42],[11,523928.66],[12,548180.15]]] 

的一系列標籤應該是這樣的陣列這個：

[["Tilikausi 01\/2009 - 12\/2009"],["Tilikausi 01\/2010 - 12\/2010"],["Tilikausi 01\/2011 - 12\/2011"]] // Array of series labels 

在此先感謝您的答案！

Answer 1

我認爲這個的關鍵是獲得由index.php檢索正確結構的JSON。

目前你正在返回此：

[[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76],[4,409203.91],[5,392167.56],[6,547296.04],[7,529292.86],[8,523009.35],[9,541452.97],[10,535397.58],[11,555497.48],[12,465849.17]],[[0,465849.17],[1,464569.69],[2,468339.1],[3,471005.39],[4,470786.79],[5,472315.46],[6,492847.16],[7,495973.32],[8,520188.21],[9,550497.27],[10,544294.18],[11,559081.4],[12,479558.69]],[[0,479558.69],[1,467694.94],[2,459592.48],[3,476012.25],[4,463623.8],[5,487588.68],[6,445992.44],[7,457935.72],[8,481076.75],[9,498464.53],[10,508681.42],[11,523928.66],[12,548180.15]]] 

但是你真正需要的是像這樣（的values一些內容略去了）：

{ 
    values: [[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76], ... [12,548180.15]]],   
    labels: [["Tilikausi2 01\/2009 - 12\/2009"],["Tilikausi2 01\/2010 - 12\/2010"],["Tilikausi2 01\/2011 - 12\/2011"]] 
} 

棘手的是，標籤在創建圖形時分配給一系列。這會導致問題，因爲它確實意味着Ajax調用必須在創建圖之前進行。

鑑於JSON作爲上述結構的，這樣的事情應該做的伎倆：

$.jqplot.config.enablePlugins = true; 
var jsonurl = "./index.php"; 
//Get the data prior to creating the graph. 
var plotData = ajaxDataRenderer(jsonurl); 

//plotData.values is now passed in to be the actual data the plot is created from. 
plot1 = $.jqplot('chart1', plotData.values, { 
    title: 'Annual Balance Summary', 
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer}, 
    seriesDefaults: {lineWidth:4}, 
    //The series labels can now be supplied. 
    series: plotData.labels, 
    showMarker:true, 
    pointLabels: { show:true }, 
    axes: { 
     xaxis: {pad:1, numberTicks:12, tickInterval: 1, autoscale:true, tickOptions:{formatString:'%d', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal'}}}, 
     highlighter: {bringSeriesToFront: true} 
}); 

編輯：

，你需要做的就是修改labels陣列中的其他事情，回來。我們仍然在使用ajaxDataRenderer功能，因此您收到的數據只是後，你將需要這樣做：

for(var i = 0; i < data.labels.length; i++) { 
    data.labels[i] = { label: data.labels[i][0] }; 
} 

這一切確實是創造了一種對象文本，當你指定的標籤jqplot期待的。

編輯2：

如果你的JSON的樣子：

[[["Tilikausi 01\/2009 - 12\/2009"],["Tilikausi 01\/2010 - 12\/2010"], 
    ["Tilikausi 01\/2011 - 12\/2011"]],[[[1,-4308.6],[2,-11725.18],[3,-23253.57], 
    ...,[10,-85437.15],[11,-10‌​5465.7],[12,-129859.38]]]] 

然後，它應該仍然工作，但你需要參考一些與衆不同的事情。而不是plotData.values你將有plotData[1]，而不是plotData.labels你將有plotData[0]。

此外，標籤重排碼反而會看起來像：

for(var i = 0; i < data[0].length; i++) { 
    data[0][i] = { label: data[0][i][0] }; 
} 

Answer 2

在JavaScript陣列讀取你的價值觀，並用它使用下面的代碼片段顯示圖例值：

legend:{ 
    show: true, 
    location: 'ne', 
    placement: "outside", 
    labels: companies 
}