Question

它是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

时，请帮我解决问题

Answer 1

您没有将任何数据传递给图表，除非它是在......之前宣布的。

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

这应该是：

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

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

Answer 2

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

long_short_data = [
  {
    key: 'Series1',   // optional
    color: '#d62728', // optional
    values: [
      {
        "label" : "Group A" ,
        "value" : -1.8746444827653
      } ,
      {
        "label" : "Group B" ,
        "value" : -8.0961543492239
      } 
    /* ... */
  }
];

在NV D3水平条形图中如何使用Json作为数据？

2 个答案: