帶AJAX數據的Flot條形圖

Question

我有一個Flot圖表和來自AJAX的數據的問題。基本上我創建了數組來顯示圖形，但不知何故，我看到了軸標籤但沒有數據。另外我怎麼做一個堆疊或條形圖？

編輯：或者任何人都可以告訴我如何使用帶x軸標籤的AJAX在flot上顯示數據。你可以在這裏看到代碼http://jsfiddle.net/DaG5W/284/。有人請讓我知道我在這裏做錯了什麼？

這是我使用的代碼。

$.getJSON(url, function(output) { 
    var calendar, count, fieldNames, i, j, values, xAxis; 
    fieldNames = new Array(); 
    i = 0; 
    while (i < output.length) { 
     if (fieldNames.indexOf(output[i].FieldName) < 0) { 
     fieldNames.push(output[i].FieldName); 
     } 
     i++; 
    } 
    calendar = new Array(); 
    i = 0; 
    while (i < output.length) { 
     if (calendar.indexOf(output[i].Calendar) < 0) { 
     calendar.push(output[i].Calendar); 
     } 
     i++; 
    } 
    xAxis = []; 
    i = 0; 
    while (i < calendar.length) { 
     xAxis.push([parseInt(i + 1), calendar[i]]); 
     i++; 
    } 
    data = []; 
    i = 0; 
    while (i < fieldNames.length) { 
     values = []; 
     count = 0; 
     j = 0; 
     while (j < output.length) { 
     if (fieldNames[i] === output[j].FieldName) { 
      count++; 
      values.push([parseInt(count), parseInt(output[j].Totals)]); 
     } 
     j++; 
     } 
     data.push([ 
     { 
      label: fieldNames[i].toString(), 
      data: values, 
      bars: { 
      show: true 
      }, 
      lines: { 
      show: false 
      } 
     } 
     ]); 
    } 
    return i++; 
    }); 
    options = { 
    xaxis: { 
     ticks: xAxis 
    } 
    }; 
    plot = $.plot($("#div"), [data], options); 

} 

Answer 1

您非常接近工作解決方案。所有你已經做了不正確的是窩在2個地方數太多陣列：

data.push([ 
    { 
     label: fieldNames[i].toString(), 
     data: values, 
     bars: { 
     show: true 
     }, 
     lines: { 
     show: false 
     } 
    } 
    ]); 

無需在你的一系列對象[]。

plot = $.plot($("#div"), [data], options); 

同樣在這裏，沒有必要對周圍data[]。之後，它會繪製圖表。看到這裏：http://jsfiddle.net/ryleyb/DaG5W/291/