Question

如何设置图表背景？我可以设置父级的背景，但我只想将背景设置为数据空间而不是轴。

我目前的解决方案是使用bb-event-rects类

#myChart .bb-event-rects {
  fill-opacity: 1 !important;
  fill: red;
}

但感觉不对

Answer 1

嗯，这是一个简单的方法。如果满足您的需求，只需使用CSS进行样式设计即可。

但是，你可能会发现<rect>元素之间有空格。因此，为了掩盖所有区域，只需添加一个新的<rect>元素作为背景样式。

查看示例：

var chart = bb.generate({
	data: {
		columns: [
			["data1", 30, 20, -5, 40, 15, 25],
			["data2", 3, 10, 20, 10, 25, 15]
		]
	},
	oninit: function() {
		this.svg.select("g.bb-event-rects").insert("rect")
			.attr("class", "myBgColor");
	}
});

.myBgColor {
    fill: cyan;
    fill-opacity: 1;
    width: 100%;
    height: 100%;
}

<!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的图表背景颜色

1 个答案: