gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:19:00 26 4
gpt4 key购买 nike

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

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

  • 为数据系列提供一个值 + 时间戳,这样只有那个点会出现在图表上,而无需用空值填充它。(例如:额外:[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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com