是否可以在不提供空数组的情况下在 billboard.js 时间序列图表上添加一个点？

Question

我正在尝试在时间序列图表上添加一些额外的点。我可以通过提供一个额外的数据系列来做到这一点，在第一个刻度中填充空值。

我想知道我们是否可以做如下事情：

为数据系列提供一个值+时间戳，这样只有那个点会出现在图表上，而不需要用空值填充它。（例如：额外：[400,"2013-01-03"]）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
 <div id="chart"></div>
  <script>
  bb.generate({
    bindto: "#chart",
    size: {
      width: 500,
      height: 250
    },
    data: {
      x: "x",
      columns: [
        ["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],
        ["data1", 30, 200, 100, 400, 150, 250],
        ["data2", 130, 340, 200, 500, 250, 350],
        ["EXTRA", null, null, 400, null, null, null],
        ["EXTRA2", null, 410], //can omit the nulls after the value
      ]
    },
    axis: {
      x: {
        type: "timeseries",
        tick: {
          format: "%Y-%m-%d"
        }
      }
    },
  });
  </script>
</body>

</html>

Answer 1

如果你需要为特定的x轴加载一些数据，你可以通过.load() API。

步骤是：

1) 正常生成图表
2) 对指定的x轴数据使用.load()

chart.load({ 列： [ ["x", "2013-01-03"], ["EXTRA", 400] ] });

NOTE: There's a bug not showing tooltip in correct x axis. This issue was already fixed and will be out in the next release. Meanwhile, you can use the fixed build with the nightly build.

查看演示代码段：

 var chart = bb.generate({
  bindto: "#chart",
  size: {
    width: 500,
    height: 250
  },
  data: {
    x: "x",
    columns: [
      ["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 130, 340, 200, 500, 250, 350]
    ]
  },
  axis: {
    x: {
      type: "timeseries",
      tick: {
        format: "%Y-%m-%d"
      }
    }
  },
});
  
chart.load({
  columns: [
   ["x", "2013-01-03"],
   ["EXTRA", 400]
  ]
});

chart.load({
  columns: [
   ["x", "2013-01-02"],
   ["EXTRA2", 410]
  ]
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

是否可以在不提供空数组的情况下在 billboard.js 时间序列图表上添加一个点？

Is it possible to add one point on billboard.js timeseries chart without providing an array of nulls?

javascript

d3.js

billboard.js