将数组值传递给 Nvd3 图表

Question

这是我的数组。

var array = [{"month":"January","url":1,"ip":12},
{"month":"February","url":102,"ip":200},{"month":"March","url":192},
{"month":"June","ip":10}];

有没有办法将这些数组作为折线图中的 x 轴和 y 轴值传递？

我试过这样。

function() {
 var array = [{"month":"January","md5":1,"ip":12},
{"month":"February","url":102,"ip":200},{"month":"March","url":192},
{"month":"June","ip":10}];
var data=[], data2=[];


<div id="chart">
<svg></svg>
</div>


 for (var i = 0; i < array.length; i++) {
data.push({x: array[i].url, y: array[i].month})
   data2.push({x: array[i].ip, y: array[i].month});
}

 return [
{
  values: data,
  key: 'URL',
  color: '#ff7f0e'
},
 {
  values: data2,
  key: 'IP',
  color: '#ff7f0e'
}
 ];
}


nv.addGraph(function() {
  var chart = nv.models.lineChart()
 .useInteractiveGuideline(true)
 ;

   chart.xAxis
  .axisLabel('Time (ms)')
  .tickFormat(d3.format(',r'))
 ;

 chart.yAxis
  .axisLabel('Voltage (v)')
  .tickFormat(d3.format('.02f'))
  ;

 d3.select('#chart svg')
 .datum(data())
  .transition().duration(500)
  .call(chart)
  ;

 nv.utils.windowResize(chart.update);

 return chart;
});

我无法从数组中传递 x 轴值。有没有办法将这些数组传递到 nvd3 的折线图中？

Answer 1

对于未来的问题，请始终包含 JSFiddle 链接。您提供的代码不是有效的 Javascript，它需要其他人来回答。

我认为这就是您想要实现的目标：http://jsfiddle.net/992gdb83/1/

你需要做的事情：

一个。您使用的是序数刻度（月），因此请遵循此处的方法：https://github.com/novus/nvd3/issues/29

  var months = ["January", "February", "March", "April"];

  chart.xAxis.axisLabel("Time (ms)").tickFormat(function(index) {
    return months[index];
  });

  chart.x(function(d, i) {
    return i;
  });

b.您在某些时间点缺少 URL/IP 数据。

c。您可能应该使用 .x/.y 访问器函数

d。您的代码格式不正确。使用https://prettier.io/playground/