0

它现在是nv d3条形图程序的源程序我分离了条形图数据的硬代码，即data.json，它现在不显示图表。

 <script>
   d3.json("Data.json", function (data) {
   var chart;
   nv.addGraph(function() {
   chart = nv.models.multiBarHorizontalChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
  .margin({top: 30, right: 20, bottom: 50, left: 175})
  .showValues(true)
  .tooltips(false)
  .showControls(false);

   chart.yAxis
  .tickFormat(d3.format(',.2f'));

  d3.select('#chart1 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;
  });

  });

  </script>

这是我从源中分离出来的data.json，它不起作用

 [
  { 
    "label" : "Group A" ,
    "value" : -1.8746444827653
  } , 
  { 
    "label" : "Group B" ,
    "value" : -8.0961543492239
  } , 
  { 
    "label" : "Group C" ,
    "value" : -0.57072943117674
  } , 
  { 
    "label" : "Group D" ,
    "value" : -2.4174010336624
  } , 
  {
    "label" : "Group E" ,
    "value" : -0.72009071426284
  } , 
  { 
    "label" : "Group F" ,
    "value" : -0.77154485523777
  } , 
  { 
    "label" : "Group G" ,
    "value" : -0.90152097798131
  } , 
  {
    "label" : "Group H" ,
    "value" : -0.91445417330854
  } , 
  { 
    "label" : "Group I" ,
    "value" : -0.055746319141851
  }
]

请帮助我分离json时出了什么问题

4

2 回答 2

1

除非之前声明过，否则您不会将任何数据传递给图表...

d3.select('#chart1 svg')
   .datum(long_short_data)

这应该是：

d3.select('#chart1 svg')
   .datum(data)

如果您打算从 json 文件加载图表数据...

于 2013-02-22T10:33:06.773 回答
1

坚持示例代码中使用的格式，您需要提供系列数据，即使您只有一个系列。您还可以选择为每个系列设置颜色名称。

long_short_data = [
  {
    key: 'Series1',   // optional
    color: '#d62728', // optional
    values: [
      {
        "label" : "Group A" ,
        "value" : -1.8746444827653
      } ,
      {
        "label" : "Group B" ,
        "value" : -8.0961543492239
      } 
    /* ... */
  }
];
于 2013-02-23T17:17:31.230 回答