c3js 막 대형 차트에서 둥근 모서리를 얻는 방법

Question

막 대형 차트의 둥근 모서리를 지원하는 nvd3, c3js와 같은 d3 기반 차트 작성 라이브러리와 모양이 같습니다.

내 프로젝트의 그라디언트 및 둥근 모서리와 함께 막대 차트의 막대가 아래와 같이 표시되어야합니다.

모든 해킹이나 설정은 c3js이를 달성하기 위해?

Answer 1

c3js 함수 generateDrawBar를 재정의하고 둥근 모서리를 가져올 논리를 제공해야하며, 일반적으로 c3js 경로 요소는 막대의 네 모서리에 해당하는 4 개의 점으로 구성됩니다.

이제는 막대 모서리를 부드럽게하기 위해 파의 왼쪽 상단과 오른쪽 상단 모서리에 여러 점이있는 논리를 제공해야합니다.

은 여전히 ​​몇 가지 경우가 있습니다 : -

1) 누적 막 대형 차트 둥근 모서리.

2) 음수 값의 경우 둥근 모서리, 아래쪽 방향 또는 반대 방향을 나타내는 막대.

rounded corner bars 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 
} 
});