使用node.js绘制图形并在轴上传递数组

Question

我想制作一个简单的图表。这是来自plotly官方文档的node.js中的代码。

 equire('plotly')(username, api_key);
 var data = [
  {
    x: ["2013-10-04 22:23:00", "2013-11-04 22:23:00", "2013-12-04 22:23:00"],
    y: [1, 3, 6],
    type: "scatter"
  }
];
var graphOptions = {filename: "date-axes", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

这里，我想在x轴上传递一个数组。下面给出了我要改变的地方 x：[“2013-10-04 22:23:00”，“2013-11-04 22:23:00”，“2013-12-04 22:23:00”]，

我试过这种方式。

xx = [];

for (i = 1; i < 100; i++) {

            xx[i] = i;

}

var data = [
  {
    x: xx,
    y: [1, 3, 6],
    type: "scatter"
  }
];
var graphOptions = {filename: "date-axes", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

但上面给出的代码不起作用。请问有人可以建议我如何解决这个问题吗？ 提前谢谢。

Answer 1

我检查了你的代码，我能够获得xaxis。 PFB生成的图表的屏幕截图。我认为你需要向下滚动一下才能在图形化的在线编辑器中看到xaxis。

继续，我仍然无法看到xaxis，我建议您设置以下布局属性，您可以在其中配置xaxis。请参阅此处的链接以获取图解官方文档。

var layout = {
  xaxis: {
    visible: true,
    range: [1, 100],
    dtick: 1
  }
}

在上面的代码中，我配置xaxis以更好地适应所提供的数据。

var plotly = require('plotly')('username here', 'API Key Here');
xx = [];
yy = [];
for (i = 0; i < 100; i++) {

  xx[i] = i + 1;
  yy[i] = y + 1;

}

var data = [{
  x: xx,
  y: yy,
  type: "scatter"
}];
var layout = {
  xaxis: {
    visible: true,
    range: [1, 100],
    dtick: 1
  }
}
var graphOptions = {
  layout: layout,
  filename: "date-axes",
  fileopt: "overwrite"
};
plotly.plot(data, graphOptions, function(err, msg) {
  console.log(msg);
});

我也改变了yaxis值，以生成更好看的图形。如果这可以解决您的问题，请与我们联系！