billboard.js 上的图表背景颜色答案

【问题标题】：Chart background color on billboard.jsbillboard.js 上的图表背景颜色
【发布时间】：2018-02-21 15:31:21
【问题描述】：

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

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

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

但感觉不对

【问题讨论】：

标签： billboard.js

【解决方案1】：

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

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

看看下面的例子：

EDIT(03/12/19)：自v1.11.0 以来实施了新的background 选项。查看Demo。

编辑：简单的方法：

1) 只需为事件元素填充颜色，但在这种情况下，您将在左右两侧有空白区域。
.bb-event-rects .bb-event-rect {
   fill: cyan;
} 
2) 或者干脆使用 'regions' 选项
bb.generate({
   ...
   regions: [{ axis: "x" }],
.bb-region {fill: cyan; }

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("width", "100%")
		  .attr("height", "100%")
		  .attr("class", "myBgColor");
	}
});

.myBgColor {
    fill: cyan;
    fill-opacity: 1;
}

<!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>

【讨论】：

谢谢！ CSS 目前正在解决这个问题，如果我遇到任何问题，我会将您的解决方案作为备用计划！