jQuery Flot未能顯示圖表數據

Question

我正在使用偉圖插件Flot將html頁面中的字符串替換爲圖表。但是，情節本身並沒有顯示出來。

佔位符：

<div class="chart" id="example1" style="width:300px; height:150px">2009:12.90,2010:12.80,2011:13.90,2012:14.50</div> 
<div class="chart" id="example2" style="width:300px;height:150px">1:2,2:1,3:6,4:3</div> 

釷jQuery代碼：

$(".chart").each(function(index, value) { 

    var id = this.id; 

    var obj = $("#" + id).html().split(","); 
    var chartdata = []; 

    $.each(obj, function(i, val) { 
     chartdata[i] = "[" + val.replace(":",",") + "]"; 
     console.log(val); 
    }); 

    var thechart = chartdata.join(","); 
    console.log(thechart); 

    var d1 = "[" + thechart + "]"; 
    console.log("#" + id + " -> " + d1); 

    $.plot($("#" + id), [ 
     { 
      data: d1, 
      lines: { show: true, fill: true } 
     }, 
    ]); 

}); 

當我與它的工作實際數據替換D1。我懷疑它與作爲字符串或其他東西呈現的數據有關。雖然沒有得到它的權利。我不想將數據添加到jquery調用中，因爲我們使用了cms，因此用戶可以在編輯頁面時更改圖表數據。

Answer 1

是的，這是因爲你創建的數據是一個大字符串，而不是數組值。以這條線作爲一個例子：

chartdata[i] = "[" + val.replace(":",",") + "]"; 

而應該使用的代碼（大約）是這樣的：

values = val.split(":"); 
chartdata[i] = [parseInt(values[0]), parseInt(values[1])]; 

大部分代碼的其餘部分則是不必要的; obj已經是一個列表。

通過使用jQuery的'map'而不是'each'，可以使整個事情變得更簡單;那麼你甚至不需要單獨的chartdata變量;大致（未經測試）如下：

$(".chart").each(function() { 

    var id = this.id; 
    var data = $("#" + id).html().split(","); 

    $.map(data, function(point) { 
     return $.map(point.split(":"), function(value) { 
      return parseInt(value); 
     }); 
    }); 

    $.plot("#" + id, [{ 
     data: data, 
     lines: { 
      show: true, 
      fill: true 
     } 
    }]); 
});