javascript - c3js棒グラフで角を丸くする方法

Question

nvd3、c3js などの d3 ベースのグラフ作成ライブラリはいずれも、棒グラフの角の丸みをサポートしていないようです。

私のプロジェクトでは、棒グラフのバーが次のようになり、勾配があり角が丸くなっている必要があります。

c3jsでこれを達成するためのハックや設定はありますか?

Answer 1

c3js 関数 generateDrawBar をオーバーライドし、角を丸くするロジックを提供する必要があります。通常、c3js パス要素は、バーの 4 つの角に対応する 4 つのポイントで構成されます。

ここで、パーの左上隅と右上隅に複数のポイントを設定してバーの角を滑らかにするロジックを提供する必要があります。

まだいくつかのケースがあります:-

1) 積み上げ棒グラフの角を丸くします。

2) 負の値の丸みを帯びた角、バーが下向きまたは反対方向を指す。

角丸バーjsFiddle

角の丸いc3js棒グラフのスナップショット

var chart = c3.generate({
bindto: '#chart',
padding: {
    left: 200,
    right: 100,
    top: 20,
    bottom: 20
},
data: {
    x: 'x',
    labels: true,
    columns: [
        ['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254],
        ['x','Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
    ],
    type: 'bar'
},
axis: {
    rotated: true,
    x: {
        type: 'category',
        tick:{
            multiline: false
        }
    }
},
legend: {
    show: false
},
tooltip: {
    show: false
},
bar: {
    width: {
        ratio: .7
    },
    spacing: 2
}
});