Question

我正在使用Forio Contour图表库 - 我无法找到为图表设置背景颜色的方法（请参阅jsfiddle）。它总是继承容器div的bg，这不是我想要的。

$(function () {
    var data = [22, 8, 5, 19, 11, 4, 5, 13, 20, 29, 25];

    new Contour({
        el: '.chart',
    })
    .cartesian()
    .line(data)
    .render();
});

无法在http://forio.com/contour/documentation.html找到任何相关的属性 - 我错过了什么吗？

Answer 1

您可以通过两种方式实现：

您可以使用css将background-color设置为svg，这将设置整个图表的背景（包括轴和标签），如果这是您想要的

如果您想要仅在绘图区域添加背景颜色（即轴和标签保留在容器的背景中），您可以创建一个扩展，它只是一个带有绘图区域大小的矩形然后以正确的顺序将新扩展名添加到图表中，例如：

Contour.export('background', function (color, layer, options) {

  layer.enter().append('rect')
    .attr('class', 'custom-background')
    .attr('x', options.chart.plotLeft)
    .attr('y', options.chart.plotTop)
    .attr('width', options.chart.plotWidth)
    .attr('height', options.chart.plotHeight)
});

现在您可以使用css控制背景颜色：

.custom-background {
   fill: #f00;
   opacity: 0.5;
}

希望这有帮助

为Forio Contour图表设置背景颜色

1 个答案: