个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
所以如果我是 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/
24
4
0
我已经结束了这个 Java 控制台。当我添加新文本时，我可以放置一个单词，但当我尝试添加一个句子时，我收到错误!如果有人能看到我错过的东西或问题，我将非常感激。它适用于一个单词，但不适用于两个或更多单
在 Billboard.js 中包含此代码片段: var chart = bb.generate({ data: { columns: [ ["data1", 30, 200, 1
我的任务是让太阳/月亮物体在整个时间跨度内(就像在平常的一天一样)在屏幕上流动。我可以使用的选项之一是使用“广告牌”，这是一个始终面向相机的四边形。 我还没有使用过很多 direct x 库或技术。这
我是 billboard.js 的新手，试图做一件非常简单的事情:改变线条的颜色。 var chart = bb.generate({ data: { columns: [ ["d
使用 billboard.js 创建样条图时，如果数据系列有一些“足够陡”的值，则创建的图表会 chop 一些线条。它将始终显示图表中的所有点，但不是所有连接样条线。 设置顶部/底部填充将为线条提供一
我正在与 Biilboard.js 合作，一个基于D3的库。 我创建了一个图表，我希望能够在其上显示一条消息，例如，如果 Y 轴大于 100 或类似的值，则与条件无关。 这是我想要的一个例子，它是用纯
我正在尝试在时间序列图表上添加一些额外的点。我可以通过提供一个额外的数据系列来做到这一点，在第一个滴答时填充空值。 我想知道的是我们是否可以做如下事情: 为数据系列提供一个值 + 时间戳，这样只有那个
我有一个 JSON 列表，其元素是一系列图表的属性。我想使用 D3 和 billboard.js 动态生成 HTML 列表 div元素，每个元素包含一个图表。设置显示在此 fiddle .当图表出现时
有一个用 billboard.js 生成的图表我想更新 Y 轴的最小/最大值。 为此，我用 html 编写: Max: Min: 在 JS 中: updateY
根据Cesium API，要切换 Assets 的广告牌(或标签)的可见性，您只需将billboard.show属性分配为false即可。当我尝试这样做时，Cesium 会出错 An error oc
图表包含相对于两个 Y 轴 y 和 y2 定位的数据。 它是这样的: 因此，红线由一个 y 轴生成，条形由另一个 y 轴生成。 在这种情况下，红线的值始终为正(值为 13.91，但该线看起来约为 -5
我已经尝试了几个小时来了解如何准确获得“公告牌热门 100”图表(结果与 http://www.billboard.com/#/charts/hot-100 匹配)...但到目前为止还没有成功。 我已
所以我生成了一个图表，隐藏了 y 轴，如下所示: const chart = bb.generate({ "data": { "type": "line", "x"
正在关注 one example我们可以格式化刻度文本。我看到这设置为 multiline: true 默认情况下，这很好，但我也希望能够控制换行发生的位置。有办法吗？
所以如果我是 duplicating this example从 billboard.js 文档看来，添加可选的 Y 网格线似乎很容易。这是我想要的，因为我在不同的场景中动态添加它们。 我似乎无法弄清
我正在尝试为广告牌图表使用一些自定义点。我可以使用 元素，它将呈现为数据点。 我想做的是使用一些可能是一组 svg 元素的点，所以我尝试使用 或 里面有一些元素。 据我所知，图表 仅包含 g/svg
呦呦呦。我有一个疯狂的想法，要从广告牌的 100 首热门歌曲中获取 50 首，将它们下载到 mp3 文件中，然后将它们放在私有(private)在线电台上。 问题是，我这样做的方式不是逐个下载每个文件
我有这个代码: ... normen is my json object .... $.each(normen, function(item) {
我是一名优秀的程序员,十分优秀！