gpt4 book ai didi

javascript - 是否可以在 Billboard.js 的图表上显示消息文本?

转载 作者:行者123 更新时间:2023-12-01 02:26:07 25 4
gpt4 key购买 nike

我正在与 Biilboard.js 合作,一个基于D3的库。

我创建了一个图表,我希望能够在其上显示一条消息,例如,如果 Y 轴大于 100 或类似的值,则与条件无关。

这是我想要的一个例子,它是用纯 D3 完成的(我猜):

enter image description here

基本上,如果满足该条件,该消息框就会出现在图表上。

您有这样做的想法吗?

最佳答案

有多种方法可以做到这一点。

  • 1) 添加 y 轴网格文本
  • 2)简单地,添加一些普通的 DOM 元素(例如 div 等)并将其放置在图表元素上

我将尝试使用第一个例子举一些例子并检查 ygrids() API文档。

// variable to hold min and max value
var min;
var max;

var chart = bb.generate({
data: {
columns: [
["sample", 30, 200, 100, 400, 150, 250]
],
onmin: function(data) {
min = data[0].value;
},
onmax: function(data) {
max = data[0].value;
}
}
});

// add y grids with deterimined css classes to style texts added
chart.ygrids([
{value: min, text: "Value is smaller than Y max", position: "start", class: "min"},
{value: max, text: "Value is greater than Y max", position: "start", class: "max"}
]);
/* to hide grid line */
.min line, .max line{
display:none;
}

/* text styling */
.min text, .max text{
font-size:20px;
transform: translateX(10px);
}
<!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>billboard.js</title>
</head>

<body>
<div id="chart"></div>
</body>
</html>

关于javascript - 是否可以在 Billboard.js 的图表上显示消息文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48784703/

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