README
joontop-circleChart
Usage
import CircleChart from 'joontop-circlechart';
let start = function() {
let options = {
data: [
{
color: '#336699', // 색상
html: '<div class="txt1">blahblah</div>', // 보여줄 텍스트를 HTML로
percent: 30, // 합이 100 이 되도록
},
{
color: '#4477aa',
html: '<p class="txt2">blahblah</p>',
percent: 20,
},
{
color: '#5588bb',
html: '',
percent: 50,
},
],
outerDiameter: 300, // 실제 도넛의 width,height
innerDiameter: 150, // 안쪽원의 크기, 0이면 없음
outerColor: '#99ccff', // 도넛의 기본 색상
innerColor: '#ffffff', // 안쪽원의 색상
isContents: true, // 텍스트의 유무
isEvent: false, // 이벤트 리스너 유무 (없으면 true)
isDesc: true, // 가장 큰 percent 부터 시계방향 표시
contentsMinWidth: 150, // 표시되는 텍스트영역의 최소값
target: document.querySelector('#donutTest'), // chart 가 들어갈 영역지정
};
const circleChart = new CircleChart(options);
circleChart.start();
};
start();
Sample URL
https://joontop.github.io/joontop-circleChart/sample/