NVD3折線圖未捕獲TypeError：無法讀取undefined屬性'x'

我使用NVD3庫根據Rails控制器中生成的數據製作簡單折線圖。我使用生成Rails中數據的代碼是：NVD3折線圖未捕獲TypeError：無法讀取undefined屬性'x'

task.task_values.each do |u| 
array.push({ :x => u.created_at.to_i * 1000, :y => u.value.to_i }) 
end 
data_label = task.name + " ("+ task_unit +")" 
taskValuesList = [{:key => data_label, :values => array}] 
data = {:type => "line", :data => taskValuesList}

然後，在我看來，我有以下JS代碼：

nv.addGraph(function() { 
var chart = nv.models.lineChart() 
    .x(function(d) { return d.x; }) 
     .y(function(d) { return d.y; }); 

chart.xAxis 
    .showMaxMin(false) 
     .tickFormat(function(d){return d3.time.format("%m/%d/%y")(new Date(d));}); 
chart.yAxis 
    .tickFormat(d3.format(',d')); 

d3.select('#chart<%= i %> svg') 
    .datum(data.data) 
    .transition().duration(500) 
    .call(chart); 

nv.utils.windowResize(chart.update); 
    return chart; 
});

圖表呈現正常，但是當我嘗試鼠標懸停數據點顯示工具提示，我得到的錯誤「遺漏的類型錯誤：無法讀取屬性‘X’的未定義」

來源

2013-07-12 rushilg

您能否使用傳遞給圖表的數據更新您的問題 – shabeer90

以下是一些示例數據：[{：key =>「血壓舒張（mmHg）「，：值=> [{：1373403179000，：y => 91}，{：x => 1373403469000，：y => 95}，{：x => 1373403567000， => 61}，{：x => 1373404123000，：y => 56}，{：x => 1373404515000，：y => 56}，{：x => 1373404592000，：y => 56} => 1373404749000，：y => 56}，{：x => 1373405085000，：y => 56}]}] – rushilg

我不知道關於ruby-on-rails，但是數據是否通過JSON對象？ – shabeer90

-2

確保您的數據是JSON格式，

這裏是怎麼樣的JSON數據應該像

data = [{ 
    key : "Line 1", 
    color : "#51A351", 
    values : [{ 
     x : 1373403179000, 
     y : 40 
    }, { 
     x : 1373403469000, 
     y : 30 
    }, { 
     x : 1373403567000, 
     y : 20 
    }] 
}, { 
    key : "Line 2", 
    color : "#BD362F", 
    values : [{ 
     x : 1373403179000, 
     y : 60 
    }, { 
     x : 1373403469000, 
     y : 50 
    }, { 
     x : 1373403567000, 
     y : 70 
    }] 
}]

UPDATE : 下面是一個NVD3 Line chart

來源

2013-07-13 02:45:44 shabeer90

是的，我將數據作爲JSON對象傳遞。 JS代碼接收的參數示例如下：{「type」：「line」，「data」：[{「key」：「血壓舒張壓（mmHg）」，「值」：[{「x」：1373403179000，「Y」：91}，{ 「×」：1373403469000，「Y」：95}，{ 「×」：1373403567000，「Y」：61}，{ 「×」：1373404123000，「Y」：56 }，{ 「×」：1373404515000，「Y」：56}，{ 「×」：1373404592000，「Y」：56}，{ 「×」：1373404749000，「Y」：56}，{ 「×」：1373405085000 ，「y」：56}]}]} – rushilg

此外，情節似乎很好，但錯誤來了，當我鼠標懸停工具提示 – rushilg

正如我所提到的，數據是JSON格式，但我仍然得到錯誤 - 會欣賞任何想法！ – rushilg

工作撥弄如果你看到一個Uncaught TypeError: Cannot read property 'x' of undefined很可能是因爲您的數據系列包含點的不同的號碼。

檢查這是否只發生在一個系列中。

來源

2013-10-26 06:08:26 jjmontes

謝謝 - 我看到了這一點。 – Cymen

我剛剛爲我的Y軸碰到了這個問題......並且正在尋找確保一切都匹配以避免此錯誤 –

這是原因。所有酒吧組必須具有相同數量的元素。 – PeterVermont

我有同樣的錯誤，並陷入了幾個小時。經過一番調查，我發現，我用的是最新的d3.js版本，這是不是最新版本的nvd3.js兼容

確保您使用的是d3.js版本包含在nvd3存儲庫中：/lib/d3.v3.js

這很難找到。特別是因爲nvd3 documentation告訴您使用最新的d3.js版本;-(

來源

2014-01-08 11:57:21 linqu

一個細節，這可以在包含共享共同（x，y）點的兩條線的折線圖上重現。 – mcabral

NVD3折線圖未捕獲TypeError：無法讀取undefined屬性'x'

回答

相關問題