0

データのいくつかの視覚化を作成しようとしています。私がやりたいことは、グラフを変更するためのドロップダウン メニューを作成することです。現在、私のデータは html ファイルにコード化されています。私が計画しているのは、グラフを変更するメニューから呼び出すことができる個別の JSON ファイルにデータを移動することです。これを見ましたが、CSVファイル用です。JSONファイルにこれに似たものはありますか?

<div id='chart57b8c4fde7' class='rChart nvd3'></div>     

<script type='text/javascript'>
 $(document).ready(function(){
      drawchart57b8c4fde7()
    });
    function drawchart57b8c4fde7(){  
      var opts = {
        "dom": "chart57b8c4fde7",
        "width":   725,
        "height":    550,
        "x": "NAME",
        "y": "Total",
        "group": "Type",
        "type": "multiBarChart",
        "id": "chart57b8c4fde7" 
        },
      data = [
       {
       "NAME": "ONE",
      "Type": "A",
      "Total":      4 
      },
      {
       "NAME": "TWO",
      "Type": "A",
      "Total":      2 
      },
      {
       "NAME": "ONE",
      "Type": "B",
      "Total":      5 
      },
      {
       "NAME": "TWO",
      "Type": "B",
      "Total":      5 
      }
      ]
    var data = d3.nest()
      .key(function(d){
        return opts.group === undefined ? 'main' : d[opts.group]
      })
      .entries(data)

    nv.addGraph(function() {
      var chart = nv.models[opts.type]()
        .x(function(d) { return d[opts.x] })
        .y(function(d) { return d[opts.y] })
        .width(opts.width)
        .height(opts.height)

     d3.select("#" + opts.id)
      .append('svg')
      .datum(data)
      .transition().duration(500)
      .call(chart);

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

    };
</script>
4

1 に答える 1

1

D3s の JSON リーダーを使用できます

d3.json("data.js", function(data) {
   alert(data.length)
});

または、jQuery を使用して JSON を読み取ります

$.getJSON("data.js", function(json) {
    console.log(json)
}).done(function() {
    console.log("json loaded");
}).fail(function() {
    console.log("error loading json");
});

外部リソースをロードする方法のリストは次のとおりです。

それが役に立てば幸い。

于 2013-09-26T08:33:30.783 に答える