javascript - c3 サブ チャートの背景色を設定するか、メイン チャートより透明度を低くする必要があります

Question

サブ チャートを使用している場合、ユーザー エクスペリエンスで直面している問題の 1 つは、メイン チャートとサブ チャートの両方が同じ重要性を持っていることです。つまり、同じ色などです。代わりに、サブ チャートの透明度を下げるか、サブチャートの背景色を設定するオプション。出来ますか？ドキュメント ページにサブ チャートの背景色を設定するオプションがありません。任意のガイダンスをお願いします...

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