需要为c3子图表设置背景色或使其不如主图表透明 [英] need to set back ground color for c3 sub chart or make it less transparent than main chart

问题描述

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

When I am using sub chart, one problem I am facing with user experience is both Main chart and Sub chart are of same importance, I mean same color, etc Instead what I expect is the sub chart should be less transparent or should be provided an option to set back ground color for sub chart. Is it possible? I don't see any option to set back ground color for the sub chart on documentation page. Any guidance please ...

推荐答案

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

You'd need to style it manually. I don't see that C3 uses any particular selector to distinguish the subchart from the main chart, so you might have to use n-th child to do it. Something like in the example code below.

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' />

这篇关于需要为c3子图表设置背景色或使其不如主图表透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！