1

NVD3 ライブラリを使用してグラフを作成しようとしていますが、コードで適切に動作する 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 ファイルをこのコードで適切に動作させるにはどうすればよいでしょうか? 道に迷いました...

4

1 に答える 1

0

サンプルデータのフォーマットとまったく同じように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-28T14:19:20.853 に答える