所以如果我是 duplicating this example从 billboard.js 文档看来，添加可选的 Y 网格线似乎很容易。这是我想要的，因为我在不同的场景中动态添加它们。
我似乎无法弄清楚的是如何在谈论背景颜色时向文本添加自定义样式。似乎您无法向 svg g 元素添加样式(在 billboard 中，您得到一个 svg <g> 元素，其中包含一个 <line> 和一个 <text> )。
所以如果我想让文本元素看起来像是某种绿色气泡，有什么办法可以实现吗？
var chart = bb.generate({
data: {
columns: [
["sample", 30, 200, 100, 400, 150, 250],
["sample2", 1300, 1200, 1100, 1400, 1500, 1250]
],
axes: {
sample2: "y2"
}
},
axis: {
y2: {
show: true
}
},
grid: {
y: {
lines: [
{
value: 50,
text: "Label with some bublly background"
},
{
value: 1300,
text: "Label 1300 for bubbly style",
axis: "y2",
position: "start"
},
{
value: 350,
text: "Label 350 for y",
position: "middle"
}
]
}
},
bindto: "#OptionalYGridLines"
});<!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="OptionalYGridLines"></div>
</body>
</html>最佳答案
grid.y.lines选项也接受 'class' 值。
因此，如果您需要为文本自定义一些样式，您可以执行以下操作:
grid: {
y: {
lines: [
{
value: 350,
text: "Label 350 for y",
position: "middle",
class: "test-name"
}
]
}
}
// apply to specific grid line text
.test-name text { fill: red }
// to apply all grid text
.bb-grid text { fill:red }
顺便说一句，无法为 svg 的文本元素设置背景颜色。
var chart = bb.generate({
data: {
columns: [
["sample", 30, 200, 100, 400, 150, 250],
["sample2", 1300, 1200, 1100, 1400, 1500, 1250]
],
axes: {
sample2: "y2"
}
},
axis: {
y2: {
show: true
}
},
grid: {
y: {
lines: [
{
value: 50,
text: "Label with some bublly background"
},
{
value: 1300,
text: "Label 1300 for bubbly style",
axis: "y2",
position: "start"
},
{
value: 350,
text: "Label 350 for y",
position: "middle"
}
]
}
},
bindto: "#OptionalYGridLines"
});
function addBackground() {
const index = document.querySelector("#index").value;
const grid = chart.internal.main.select(`.bb-ygrid-line:nth-child(${index})`);
const text = grid.select("text").node().getBBox();
grid.insert("rect", "text")
.attr("width", text.width)
.attr("height", text.height)
.attr("x", text.x)
.attr("y", text.y)
.style("fill", "#38ff00");
}<!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="OptionalYGridLines"></div>
<input type="number" id="index" style="width:40px" value=3>
<button onclick="addBackground()">Add background</button>
</body>
</html>关于javascript - Billboard.js 可选的 Y 网格线 - 标签背景的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50237712/