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

【问题标题】：Is it possible to add one point on billboard.js timeseries chart without providing an array of nulls?是否可以在不提供空值数组的情况下在 billboard.js 时间序列图表上添加一个点？
【发布时间】：2018-08-02 08:51:26
【问题描述】：

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

我想知道我们是否可以执行以下操作：

为数据系列提供一个值 + 时间戳，以便图表上只有该点，而无需用空值填充它。（例如：EXTRA：[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>

【问题讨论】：

标签： javascript d3.js billboard.js

【解决方案1】：

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

步骤如下：

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

chart.load({ 列： [ [“x”，“2013-01-03”]， [“额外”，400] ] });

注意：有一个bug not showing tooltip in correct x axis。此问题已修复，将在下一个版本中发布。同时，您可以使用带有nightly build 的固定版本。

查看演示的 sn-p：

 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>

【讨论】：