javascript - 需要为 c3 子图表设置背景颜色或使其不如主图表透明

Question

当我使用子图表时，我面临的一个用户体验问题是主图表和子图表都具有相同的重要性，我的意思是相同的颜色，等等相反，我期望的是子图表应该不那么透明或者应该提供一个选项来设置子图表的背景颜色。是否可以？我没有看到任何为文档页面上的子图表设置背景颜色的选项。请任何指导...

Answer 1

您需要手动设置样式。我没有看到 C3 使用任何特定的选择器来区分子图表和主图表，因此您可能必须使用第 n 个子图表来做到这一点。类似于下面的示例代码。

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    subchart: {
        show: true
    }
});

d3.selectAll("svg > g:nth-child(3)").insert("rect", ":first-child").attr("width", "100%").attr("height", "100%").attr("fill", "yellow");

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart' />