NVD3 - 使用LinePlusBarChart的JSON url數據（映射值）

我想使用NVD3庫來製作圖表，但是我無法獲得JSON網址以便與代碼正常工作。NVD3 - 使用LinePlusBarChart的JSON url數據（映射值）

圖形腳本：

d3.json("jsondata3.json",function(error,data){ 
var chart; 
nv.addGraph(function() { 
chart = nv.models.linePlusBarChart() 
    .x(function(d) { return d.label }) 
    .y(function(d) { return d.value }) 
    .margin({top: 30, right: 20, bottom: 50, left: 175}) 

chart.y1Axis.tickFormat(d3.format(',f')); 
    chart.y2Axis.tickFormat(d3.format(',f')); 

    d3.select('#chart svg') 
    .datum(data) 
    .transition().duration(500) 
    .call(chart); 

nv.utils.windowResize(chart.update); 

chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); 

return chart; 
}); 
});

JSON數據格式：

[{"TRANSACTION_DAY":"20130620","MT_ATTEMPTED":4505891,"MT_SUCCESS":83.54,"MO_ATTEMPTED":321857,"MO_SUCCESS":98.9},{"TRANSACTION_DAY":"20130621","MT_ATTEMPTED":6636631,"MT_SUCCESS":81.33,"MO_ATTEMPTED":311954,"MO_SUCCESS":98.66},{"TRANSACTION_DAY":"20130622","MT_ATTEMPTED":2708897,"MT_SUCCESS":90.47,"MO_ATTEMPTED":334279,"MO_SUCCESS":98.95} ]

的例子來使用此代碼（其中工程明顯），但我承認它已經從我的JSON數據略有不同的格式。那裏還使用了「map.series.values」函數。

var testdata = [ 
    { 
    "key" : "Quantity" , 
    "bar": true, 
    "values" : [ [ 1327986000000 , 690033.0] , [ 1330491600000 , 690033.0] , [ 1333166400000 , 514733.0] , [ 1335758400000 , 514733.0]] 
    }, 
    { 
    "key" : "Price" , 
    "values" : [ [ 1322629200000 , 382.2] , [ 1325307600000 , 405.0] , [ 1327986000000 , 456.48] , [ 1330491600000 , 542.44] , [ 1333166400000 , 599.55] , [ 1335758400000 , 583.98] ] 
    } 
].map(function(series) { 
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); 
    return series; 
});

那麼如何讓我的JSON文件與此代碼正常工作？我迷路了...

來源

2013-08-26 user2718596

你收到任何錯誤訊息？ –

是的。我得到了錯誤：「d.values is undefined」 – user2718596

您至少需要更改'x'和'y'的訪問器，即返回'd.TRANSACTION_DAY'和'd.MT_SUCCESS'或任何適當的參數。 –

我認爲你仍然需要格式化你的JSON數據完全相同的樣本數據的格式。嘗試這個。

注意：JavaScript的時間戳是毫秒，所以你應該將時間戳（20130620等）轉換爲unix時間戳和多個1000

 var testdata = [ 
    { 
    "key" : "MT_ATTEMPTED" , 
    "bar": true, 
    "values" : [ [ 4505891 , 20130620] , [ 6636631 , 20130621] , [ 2708897 , 20130622] ] 
    }, 
    { 
    "key" : "MT_SUCCESS" , 
    "values" : [ [ 83.54 , 20130620] , [ 81.33 , 20130621] , [ 90.47 , 20130622] ] 
    }, 
    { 
    "key" : "MO_ATTEMPTED" , 
    "values" : [ [ 321857 , 20130620] , [ 311954 , 20130621] , [ 334279 , 20130622] ] 
    }, 
    { 
    "key" : "MO_SUCCESS" , 
    "values" : [ [ 98.9 , 20130620] , [ 98.66 , 20130621] , [ 98.95 , 20130622] ] 
    }, 
].map(function(series) { 
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); 
    return series; 
});

來源

2013-08-28 14:19:20 nerocrux

NVD3 - 使用LinePlusBarChart的JSON url數據（映射值）

回答

相關問題