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

Question

我正在使用 Biilboard.js，一个基于 D3 的库。

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

这是我想要用纯 D3 完成的示例（我猜）：

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

你有什么想法吗？

Answer 1

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

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>

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

Is it possible to show a message text on the chart of Billboard.js?

javascript

charts

d3.js

billboard.js