원형 차트 만들기


14

도전은 간단하다 :

여러 입력 값을 기반으로 원형 차트를 만듭니다.

입력은 양수, 10 진수 또는 정수의 목록이되고 출력은 각 입력 값이 별도의 색상으로 표시되고 각 영역 외부의 백분율 값으로 표시되는 원형 차트가됩니다.

규칙 :

  • 색상은 시각적으로 구별 가능해야합니다 (정확한 색상은 선택 사항 임)
  • 최소 2 개, 최대 10 개의 입력 값이 있습니다.
  • 원의 반경은 [100 300]픽셀 범위에 있어야합니다
    • 기본 출력이 [100, 300]픽셀 반경을 제공하는 한 벡터 그래픽은 정상입니다
  • 백분율 값은 정수 여야합니다
    • 백분율 값이 어디에 위치해야하는지에 대한 엄격한 규칙은 없지만, 그것이 속한 영역을 쉽게 볼 수 있어야합니다.
    • 가장 가까운 문자와 원의 바깥 쪽 가장자리 사이의 거리는 [5, 40]픽셀 범위에 있어야합니다
    • 글꼴은 선택 사항입니다
  • 줄거리에는 각 영역을 분리하는 검은 선이있을 수도 있고 없을 수도 있습니다.
  • 파이 차트를 만들기 위해 만들어진 함수 (예 : MATLAB : pie, Python : matplotlib.pyplot.pie및 Mathematica :) PieChart는 허용되지 않습니다
  • 일반 반올림 규칙 (이면 위로 (1.00, 0.5],이면 아래로 (0.5, 0.00))
  • 슬라이스의 백분율 값이보다 작 으면 0.5%출력 0%합니다. 슬라이스는 여전히 플롯에 포함되어야합니다.
  • 시험을위한 도표 (또는 통역사와의 링크)를 제공하십시오. 매우 긴 답변을 피하기 위해 10 개의 입력 값이있는 플롯 만 표시하면 충분합니다

아래 예제 값을 사용하십시오. 숫자 목록 변환기를 사용하여 목록을 적절한 형식으로 변환 할 수 있습니다 ( 예 : jimmy23013의 27 바이트) .

x = [0.3, 1.2] 

여기에 이미지 설명을 입력하십시오

x = [3, 6, 2, 10]

여기에 이미지 설명을 입력하십시오

x = [0.4387, 0.3816, 0.7655, 0.7952, 0.1869, 0.4898, 0.4456, 0.6463, 0.7094, 0.7547]

여기에 이미지 설명을 입력하십시오


"원의 반경은 [100 300] 픽셀 범위에 있어야합니다." 벡터 그래픽도 허용됩니까?
Martin Ender

@ MartinBüttner, 그렇습니다. 프로그램의 출력이 기본적으로 [100, 300] 사이에있는 한 괜찮습니다. 충분한 대답입니까?
Stewie Griffin

R은 0.5를 0으로 반올림합니다. 문제입니까?
Masclins

0.5기본값 인 경우 0 으로 반올림 해도됩니다. 그러나 0.500011로 반올림되어야합니다.
Stewie Griffin

답변:


12

매쓰, 186 (183) 164 바이트

Graphics[{Hue@#,Disk[{0,0},{1,1},a=2Pi{##}],Black,Text[ToString@Round[100(#2-#)]<>"%",5Through@{Cos,Sin}@Mean@a/4]}&@@@Partition[Accumulate[#/Tr@#]~Prepend~0,2,1]]&

더 골프를 칠 수있었습니다. 현재 Graphics객체를 생성 합니다. 테스트 사례 :




7

자바 스크립트 (ES6) 311 310 302 298 바이트

a=>{with(Math)document.write(`<svg height=300>`+a.map(n=>`<path fill=#${(p*4e3|0).toString(16)} d=M135,150L${c(o=100,v=0)}A${[o,o,0,(v=n/=s)+.5|0,0,c(o)]}Z /><text x=${(z=c(135,v/=2))[0]} y=${z[p+=n,1]}>${n*o+.5|0}%</text>`,c=r=>[sin(d=PI*2*(v+p))*r+135,cos(d)*r+150],p=s=0,a.map(n=>s+=n)).join``)}

@Neil의 도움으로 바이트를 저장했습니다!

설명

SVG를 현재 페이지의 HTML에 씁니다. 중심 135 x 150반지름 100px과 중심 반지름으로 차트를 135px만듭니다.

var solution =

a=>{
  with(Math)
  document.write(       // write to HTML body
    `<svg height=300>`+ // create 300px x 300px SVG canvas (width defaults to 300px)
    a.map(n=>           // for each number
      
      // Get the hex colour by multiplying the current position by (roughly) 0xfff
      `<path fill=#${(p*4e3|0).toString(16)
      
      // Calculate the path of the pie slice
      } d=M135,150L${c(o=100,v=0)}A${[o,o,0,(v=n/=s)+.5|0,0,c(o)]
      
      // Text
      }Z /><text x=${(z=c(135,v/=2))[0]} y=${z[p+=n,1]}>${n*o+.5|0}%</text>`,
      
      // Returns [ x, y ] for a certain radius at position v around the pie
      c=r=>[sin(d=PI*2*(v+p))*r+135,cos(d)*r+150],
      p=s=0,             // p = current position around pie (0 - 1)
      a.map(n=>s+=n)     // s = sum of all numbers
    ).join``
    
    +`</svg>` // <- this is just here for the test, so multiple charts can be displayed
  )
}

// Test
;[
  [0.3, 1.2],
  [3, 6, 2, 10],
  [0.4387, 0.3816, 0.7655, 0.7952, 0.1869, 0.4898, 0.4456, 0.6463, 0.7094, 0.7547]
].map(c=>solution(c));


을 사용하여 몇 바이트를 절약 할 수 있다고 생각합니다 with(Math)c=r=>[sin(d=PI*2*(v+p))*r+135,cos(d)*r+150].
Neil

흠, 당신은 with(Math)var solution = a=>등 을 써야 할 수도 있습니다 .
Neil

흠, 실제로 사용할 수 있습니다 with. 내가 마지막으로 시도했을 때 내가 엄격 모드에 있었을 것 같아요 ...
user81655

@ 닐 거기에있어, 고마워 나는 그것을 쓸 때 조금 서두르고 있었기 때문에 이것에 대해 할 수있는 약간의 골프가 있다고 확신합니다.
user81655

1 바이트 만 저장 했습니까? 나는 그것이 시작이라고 생각한다.
Neil

6

파이썬 + PIL, 365 355

from math import*;from random import*
from PIL import Image,ImageDraw
L,a,r=256,0,0.8;l,p,c=L/2,L/6,(L,L,L);I=Image.new('RGB',(L,L),c);D=ImageDraw.Draw(I)
x=input()
for i in x:b=a+ceil(360.0*i/sum(x));D.pieslice((p,p,L-p,L-p),int(a),int(b),tuple(map(randrange,c)));t=(a+b)*0.00872;D.text((l+cos(t)*l*r,l+sin(t)*l*r),str(int((b-a)/3.6))+'%',0);a=b
I.show()

여기에 이미지 설명을 입력하십시오

가장 큰 예제 목록의 결과 :

여기에 이미지 설명을 입력하십시오


파이썬 2에서하지 eval(raw_input())파이썬 2 개의 동등 input()?
고양이

@cat 네!
dieter
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.