billboard.js 上的图表背景颜色

Question

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

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

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

但感觉不对

Answer 1

好吧，这是最简单的方法。如果满足您的需求，只需使用 css.

样式即可

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

查看下面的示例：

EDIT(03/12/19): Implemented new background option since v1.11.0. Checkout the Demo.

EDIT: The simple way:

1) Just fill the color for event <rect> elements, but in this case you will have blank spaced area in left & right.
.bb-event-rects .bb-event-rect {
   fill: cyan;
} 
2) Or simply use 'regions' option
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>

billboard.js 上的图表背景颜色

Chart background color on billboard.js

billboard.js