테스트 사이트 - 개발 중인 베타 버전입니다

타원 그래프소스 관련 질문 드립니다. 채택완료

승승이 1년 전 조회 1,648

http://sir.kr/data/editor/2402/1890264991_1709081241.8.jpg" />

위 이미지 처럼

타원형 그래프 소스를 찾고 있는데, 흔한 그래프 방식이 아니라 그런지 아무리 찾아도 보이질 않네요.

원형은 가끔 보이긴 하는데, 타원으로 바꾸기가 어렵습니다.

 

혹시 저런 형태의 그래프 소스가 있을지 문의드립니다.

아니면 제작의뢰를 해야하는지, 한다면 가능한 형태인지요..

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
1년 전

가능합니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

승승이
1년 전
쪽지드렸습니다. 확인 부탁드립니다.

댓글을 작성하려면 로그인이 필요합니다.

예를 들어 다음과 같이 해 볼 수 있을것 같습니다.

참고하셔서 원하시는 형식으로 구현해 보시는건 어떨까 합니다.

</p>

<p><?php

// 데이터

$categories = ['A', 'B', 'C', 'D', 'E'];

$values = [20, 30, 25, 35, 40];</p>

<p>// SVG 크기 설정

$svg_width = 400;

$svg_height = 400;

$cx = $svg_width / 2; // 타원의 중심 x좌표

$cy = $svg_height / 2; // 타원의 중심 y좌표

$radius_x = 100; // 타원의 x축 반지름

$radius_y = 60; // 타원의 y축 반지름</p>

<p>// 총 값의 합 계산

$total = array_sum($values);</p>

<p>// 각 부분의 시작 각도 초기화

$start_angle = 0;</p>

<p>// SVG 코드 생성

echo '<svg width="' . $svg_width . '" height="' . $svg_height . '" xmlns="<a href="http://www.w3.org/2000/svg">';" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg">';</a></p>

<p>// 각 부분에 대한 타원형 섹션 생성

foreach ($values as $key => $value) {

    // 각도 계산

    $angle = 360 * ($value / $total);</p>

<p>    // 타원형 섹션 생성

    echo '<path fill="' . getColor($key) . '" d="';

    echo 'M' . $cx . ',' . $cy; // 시작점

    echo ' L' . ($cx + $radius_x * cos(deg2rad($start_angle))) . ',' . ($cy + $radius_y * sin(deg2rad($start_angle))); // 첫 번째 점

    echo ' A' . $radius_x . ',' . $radius_y . ' 0 ' . ($angle > 180 ? '1' : '0') . ',1 ' . ($cx + $radius_x * cos(deg2rad($start_angle + $angle))) . ',' . ($cy + $radius_y * sin(deg2rad($start_angle + $angle))); // 타원의 일부

    echo ' Z"'; // 닫힘

    echo '/>';</p>

<p>    // 다음 섹션의 시작 각도 업데이트

    $start_angle += $angle;

}</p>

<p>echo '</svg>';</p>

<p>// 카테고리별 색상 반환 함수

function getColor($index) {

    $colors = ['#ff5733', '#ffd700', '#c0c0c0', '#00ff00', '#0000ff']; // 임의의 색상

    return isset($colors[$index]) ? $colors[$index] : '#000000'; // 색상이 없을 경우 기본값으로 검은색 반환

}

?>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인