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

时间:2015-05-28 07:45:01

标签: javascript css d3.js c3.js c3

当我使用子图表时,我遇到的用户体验的一个问题是主图表和子图表具有相同的重要性,我的意思是相同的颜色,等等我所期望的是子图表应该不太透明或应该提供一个选项来设置子图表的底色。可能吗?我没有看到任何选项为文档页面上的子图表设置背景颜色。任何指导请...

1 个答案:

答案 0 :(得分: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' />
&#13;
&#13;
&#13;