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;
  });

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

℃。你应该使用.x / .y访问器函数

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

将数组值传递给Nvd3图表

1 个答案: