我正在尝试在时间序列图表上添加一些额外的点。 我可以通过提供一个额外的数据系列来做到这一点，在第一个滴答时填充空值。
我想知道的是我们是否可以做如下事情:
- 为数据系列提供一个值 + 时间戳，这样只有那个点会出现在图表上，而无需用空值填充它。 (例如:额外:[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>最佳答案
如果您需要为特定的 x 轴加载一些数据，您可以通过 .load() API 来完成。
步骤是:
- 1) 正常生成图表
2) 对指定的 x 轴数据使用
.load()图表.load({ 列: [ ["x", "2013-01-03"], [“额外”，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>关于javascript - 是否可以在不提供空值数组的情况下在 billboard.js 时间序列图表上添加一个点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51649430/