플로트 도넛 차트 형식 개별 원형 조각

Question

flot.js을 사용하여 매우 기본적인 도넛 형 차트가 있습니다.

var options = { 
      series: { 
      pie: { 
       innerRadius: 0.85, 
       show: true 
       } 
      }, 
      grid: { 
       hoverable: true 
      }, 
      colors: ["#83a243", "#0d596d"] 
      }; 
$.plot($("#donut-div"), [4, 6], options); 

개별 조각을 포맷 할 수 있습니까? 하나의 슬라이스의 innerRadius를 다른 슬라이스보다 넓게 설정하려고합니다. 내 목표는 두 개의 데이터 포인트가있는 그래프를 만들고 그 정보를 강조하기 위해 슬라이스 중 하나를 넓게 만드는 것입니다.

Answer 1

안타깝게도 개인 안쪽 반지름 옵션이 없으므로 포럼에서 이야기하는 것을 보지 못했습니다. 나는 당신이 원하는 것을 오해했을 지 모르지만, innerRadius는 도넛의 반경이 아니라 도넛의 반경입니다.

http://img11.hostingpics.net/pics/420457test.png

하면 조각이 넓은하지 않습니다,하지만 구분 : 개별 innerRadius으로, 당신은 그와 함께 끝낼 것입니다.

파이 플러그인을 편집해야한다면 파이어 플러그인을 편집해야합니다. 실제 난이도는 개별 반경이 아니라 현재 짙은 원으로 그려져있는 그림자 (그림자를 드리 우면 그림자가 있음)입니다. 대신 개별 그림자로 그려야하지만 그림자를 사용하는 것 같지 않으므로 필요 없다.

그래서 pie 플러그인은 drawPie() 메서드를 사용하여 개별 슬라이스를 그리는 drawSlice() 메서드가 포함 된 파이 메서드를 그립니다.

그래서 drawSlice가 호출되는 경우, 그냥이 같은 뭔가 전화 교체 :

drawSlice(slices[i].angle, slices[i].translateRadius, slices[i].color, true); 

(나는 조각을 추가 [내가 무엇을 당신이해야 할 것은 당신의 반경에 따라 도면을 번역 drawSlice 말씀입니다 상기 통화 .translateRadius)

및 drawSlice 방법 자체

, 충전 후 옵션 :

ctx.translate(
    translateRadius * Math.cos(currentAngle + angle/2), 
    translateRadius * Math.sin(currentAngle + angle/2) 
) 

그렇다고하여 상기 병진. 당신은 (translateRadius가 설정되어있는 경우 ... 등 확인) 일부 보안 옵션을 사용할 수 있습니다, 그리고 당신은이처럼 indivual 시리즈 에 translateRadius 옵션을 추가 할 수 있습니다

var data = [ {translateRadius: 10, data: [66] } , {translateRadius: 10, data: [33] }