C3.jsでは、JSONデータを使用して、個々のバーの色を変更する方法は？

Question

私はいくつかのJSONデータと棒グラフがあります

var chart = c3.generate({ 
data: { 
    type: 'bar', 
    json: [ 
     { 'indicator': 'X', 'total': 500 }, 
     { 'indicator': 'Y', 'total': 600 }, 
     { 'indicator': 'Z', 'total': 700 } 
    ], 
    keys: { 
     x: 'indicator', 
     value: ['total'] 
    } 
}, 
axis: { 
     x: { 
      type: 'category' 
     } 
}, 
bar: { 
    width: { 
     ratio: 0.5 
    } 
}, 
color: { 
    pattern: ['#E39920', '#53B5B5', '#CD249A'] 
    }, 
}); 

http://jsfiddle.net/fu33b6em/

どのように私は、各バーの色を変更することができますか？私は、C3のカラーパターンソリューションを使用しましたが、それはすべてのバーをパターンの最初の色と同じにします。

Answer 1

使用している色のバリエーションは、棒グラフをシリーズで塗りつぶします。また、棒のデータはすべて「合計」シリーズに含まれているため、すべて同じ色になります。

は、2つのオプションがあります： - フルフィドル

color: function (color, d) { 
     if (d.id) { 
      return ['#E39920', '#53B5B5', '#CD249A'][d.index % 3]; 
     } 
     return "#000"; 
    }, 

ため http://jsfiddle.net/fu33b6em/1/を参照してください。まず

、何を行うことができ、データ宣言内のカラー関数を宣言し、バーごとに色を設定する.INDEXを使用しています

しかし、下部のシリーズキーにはこれらの色が反映されていないことがわかるため、コードの「＃000」という黒色のシリーズ「合計」のデフォルトカラーを返します。 http://jsfiddle.net/fu33b6em/2/

data: { 
    type: 'bar', 
    json: [ 
     { 'indicator': 'X', 'totalX': 100 }, 
     { 'indicator': 'Y', 'totalY': 200 }, 
     { 'indicator': 'Z', 'totalZ': 300 } 
    ], 
    groups: [ 
     ["totalX", "totalY", "totalZ"], 
    ], 
    keys: { 
     x: 'indicator', 
     value: ['totalX', 'totalY', 'totalZ'], 
    }, 
}, 

groups宣言は、チャートのギャップを避けるためにそこにある -

あなたの第二の代替は、エントリーごとに別々のシリーズ、すなわちtotalX、ば完全に、totalZを宣言して、元の色の機能を維持することです。つまり、XはtotalYとtotalZのデータが欠落していますが、c3はバーのスペースを確保します。しかし、c3はグループ化されており（積み重ねられている）、1つの棒だけのスペースとスペースが予約されます（totalYとtotalZは、この場合totalXと同じ列にあるゼロ高さの積み重ね棒です）