是否可以在Billboard.js图表上显示消息文本? [英] Is it possible to show a message text on the chart of Billboard.js?
问题描述
我正在使用 Biilboard.js ，这是一个基于D3的库
I'm working with Biilboard.js, a library which is based on D3.
我创建了一个图表，并且希望能够在其上显示一条消息，例如，如果Y轴大于100或类似的东西，则与条件无关.
I created a chart and I want to be able to show a message on it, for example if Y-axis is greater than 100 or anything like this, doesn't matter the condition.
这是我要使用纯D3完成的示例(我想):
This is an example of what I want which is done with pure D3 (I guess):
基本上，如果满足该条件，则该消息框将显示在图表上方.
Basically, if that condition is fulfilled, that message box appears over the chart.
您对此有任何想法吗?
Do you have any ideas of to do this?
推荐答案
有几种方法可以做到这一点.
There're several ways to do that.
- 1)添加y轴网格文本
- 2)简单地，添加一些普通的DOM元素(例如div等)，并将其放置在图表元素上方
我将尝试使用第一个示例，并检查 ygrids() API文档.
I'll try put some example using the first one and check for the ygrids() API doc.
// 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>
这篇关于是否可以在Billboard.js图表上显示消息文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
