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 回答