jQuery Highcharts 도넛 형 도넛 차트

Question

하이 차트를 사용하여이 차트 디자인을 복제하려고했습니다.

내가 원하는 결과를 얻으려고 노력 jsfiddle와 함께 놀았 던, 그러나 문제는이 비율이 작성되지 흰색 영역을 얻을 관리 할 수 ​​없습니다 얻을 수 없다는 것입니다 막대 사이의 간격.

하이 차트를 사용해도 가능합니까?

Answer 1

No, it's perfectly possible. It's just bloody difficult. 하지만, 왜 안돼?

높은 차트의 문제점은 특정 각도로 차트를 회전하거나 배치 할 수 없다는 것입니다.

언급 한 효과를 만들려면 모든 새 데이터 항목에 대해 별도의 차트를 만들어야합니다.

물론이 모든 코드를 하드 코딩하지 않으므로 for 루프로 코드를 생성해야합니다. 데이터 항목의 시작과 끝점, 도넛의 상대적인 크기 (전체 크기 및 내부 크기), 바깥 도넛 사이의 간격, 비율에 대한 실제 값의 변환 등.

약간의 시행 착오 후, 나는 다음과 같은 결과로 결국 :에 당신이 설정을 조정할 수 있도록

지금 내가 당신을 위해 jsFiddle을 준비했습니다 당신의 당신이 좋아하는 결과를 얻으십시오. 가장 중요한 매개 변수는 다음과 같습니다.

// Specify all properties here: 
var MIN = 0;      // Specify minimum value (beginning of range) 
var MAX = 100;      // Specify maximum value (ending of range) 
var VALUES = [50, 30, 40, 95, 35]; // Specify the values 
var VALUES_WHITE = [20, 20, 20, 20, 20]; // Values for the white donut (5 x 100/5) 
var COLORS = ['#1FFFF0', '#FFCD05', '#68EB05', '#EB13EB', '#A7EB09']; // Colors 
var CATEGORIES = ['Activity', 'Weight', 'Sleep', 'Health', 'Diet']; // Categories 
var BORDERWIDTH_CHART_1 = 20;  // The border width for the white donut chart 
var BORDER_COLOR = 'rgba(96, 72, 193, 1)'; 

이러한 매개 변수는 위에서 언급 한 모든 변수를 결정하는 데 코드에서 사용됩니다. 예 : 이제 값의 최소값은 0이고 최대 값은 100입니다. 따라서 var VALUES = [50, 30, 40, 95, 35];의 값은 그래프의 백분율을 나타냅니다 (0-100 눈금).

지금은 5 가지 카테고리에 대한 그래프를 작성했습니다. 더 많거나 적은 것을 원한다면 그에 따라 속성을 간단히 변경하면됩니다. 나는 아직 그것을 테스트하지 않았다. 어쨌든, 당신이 원하는대로 그래프를 향상시킬 수 있습니다 : 레이블에 백분율을 추가하는 등의 색상 개선

는 하나의 제한이 다음 BORDER_COLOR이 배경의 색과 같은 색이어야합니다 차트. 내가 만든 jsFiddle에서이 파일은 body입니다 (jsFiddle의 오른쪽 상단 CSS 참조).

나는 그것을 좋아하길 바랍니다 :)

Take me to the DEMO already!