我正在与 Biilboard.js 合作，一个基于D3的库。
我创建了一个图表，我希望能够在其上显示一条消息，例如，如果 Y 轴大于 100 或类似的值，则与条件无关。
这是我想要的一个例子，它是用纯 D3 完成的(我猜):
基本上，如果满足该条件，该消息框就会出现在图表上。
您有这样做的想法吗？
最佳答案
有多种方法可以做到这一点。
- 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/