Chart.js : Pie, Donut 및 Bubble Charts를 시작합니다

이 튜토리얼은 Chart.js를 사용하여 파이, 링 및 버블 차트를 만드는 방법을 설명합니다. 이전에는 차트 유형의 차트 유형을 배웠습니다. JS : 라인 차트 및 막대 차트 (자습서 2)와 레이더 차트 및 극지 지역 차트 (자습서 3)를 배웠습니다.

파이 및 링 차트를 만듭니다

파이 차트와 링 차트는 다른 부분으로 나뉘어 진 전체의 비율을 보여주는 데 이상적입니다. 예를 들어, 파이 차트는 사파리에서 남성 사자, 여성 사자 및 젊은 사자의 비율 또는 선거에서 다른 후보자가받는 투표율을 보여주는 데 사용될 수 있습니다.

파이 차트는 단일 매개 변수 또는 데이터 세트를 비교하는 데만 적합합니다. 파이 차트의 팬 각도는 데이터 포인트의 숫자 크기에 의존하기 때문에 원형 차트는 값이 0 인 엔티티를 그릴 수 없습니다. 이는 0 비율이있는 엔티티가 차트에 표시되지 않음을 의미합니다. 마찬가지로, 음수 값은 원형 차트에서 그릴 수 없습니다.

Chart.js에서는 type 키를 pie 로 설정하여 파이 차트를 만들 수 있으며 type 키를 doughnut 으로 설정하여 링 차트를 만들 수 있습니다. 다음은 두 차트를 모두 작성하는 예입니다.

 var piechart = 새로운 차트 (Votescanvas, {
    유형 : '파이',
    데이터 : VotesData,
    옵션 : ChartOptions
});

var doughnutchart = 새로운 차트 (Votescanvas, {
    유형 : '도넛',
    데이터 : VotesData,
    옵션 : ChartOptions
});

2015 년 상위 5 개 석유 수출 업체에 대한 석유 수출 데이터 (단위 : 10 억 미국 달러)를 보여주는 파이 차트를 만들어 봅시다.

 var data = {
    라벨 : [
        "사우디 아라비아",
        "러시아 제국",
        "이라크",
        "UAE",
        "캐나다"
    ],,
    데이터 세트 : [
        {
            데이터 : [133.3, 86.2, 52.2, 51.2, 50.2],
            배경 콜로르 : [
                "#ff6384",
                "#63ff84",
                "#84ff63",
                "#8463ff",
                "#6384ff"
            ]]
        }]
}; 

다른 키를 사용하여 숫자 나 문자열 일 수있는 cutout 과 같은 위의 차트의 표시를 제어 할 수 있습니다. 숫자로 지정된 경우 값은 픽셀 값으로 간주됩니다. rotation 키를 사용하여 차트의 시작 각도를 지정할 수 있습니다. 마찬가지로 circumference 회의 키를 사용하여 데이터를 플로팅 할 때 차트가 스캔하는 각도를 지정할 수도 있습니다. 두 각도는 라디안보다는 각도로 표현됩니다.

차트를 그릴 때 두 가지 다른 애니메이션을 활성화 할 수 있습니다. animateRotate 키를 사용하여 차트에 회전 애니메이션이 있어야하는지 여부를 지정할 수 있습니다. 마찬가지로, animateScale 스케일 키를 사용하여 링 그래프를 중앙에서 스케일링 해야하는지 여부를 지정할 수도 있습니다. animateRotate 의 값은 기본적으로 true 이며, animateScale 의 값은 기본적으로 false 입니다.

평소와 같이, backgroundColor , borderColor 및 borderWidth 키를 사용하여 모든 데이터 포인트의 배경색, 테두리 색상 및 테두리 너비를 각각 제어 할 수 있습니다. 마찬가지로, 이러한 모든 특성에 대한 호버 값은 hoverBackgroundColor , hoverBorderColor 및 hoverBorderWidth 키를 사용하여 제어 할 수 있습니다.

다음은 위의 데이터에 대한 링 그래프를 만드는 코드입니다. rotation 값을 -90 으로 설정하십시오. 시동 포인트는 시계 반대 방향으로 90도 회전합니다.

 var oildata = {
  라벨 : [ "사우디 아라비아", "러시아", "이라크", "UAE", "캐나다"],
  데이터 세트 : [
    {
      데이터 : [133.3, 86.2, 52.2, 51.2, 50.2],
      Back
      BorderColor : "Black",
      Borderwidth : 2
    }
  ]]
};

var chartoptions = {
  회전 : -90,
  컷 아웃 : "45%",
  플러그인 : {
    제목: {
      디스플레이 : True,
      위치 : "하단",
      텍스트 : "2015 년 주요 석유 수출업자",
      글꼴 : {
        크기 : 32
      }
    },
    전설: {
      위치 : "왼쪽",
      정렬 : "시작"
    }
  },
  애니메이션 : {
    Animaterotate : False,
    애니메이션 스케일 : 사실입니다
  }
};

var donutchart = 새로운 차트 (OilCanvas, {
  유형 : "도넛",
  데이터 : Oildata,
  옵션 : ChartOptions
}); 

버블 차트를 만듭니다

버블 차트는 차트에 3 차원의 데이터를 그리거나 표시하는 데 사용됩니다 ( P1 , P2 , P3 ). 버블의 위치와 크기는이 세 가지 데이터 포인트의 값을 결정합니다. 수평 축은 첫 번째 데이터 포인트 (P1)를 나타내고, 세로 축은 두 번째 데이터 포인트 ( P2 )를 나타내고, 기포 영역은 세 번째 데이터 포인트 ( P3 )의 값을 나타내는 데 사용됩니다.

세 번째 데이터 포인트의 크기는 기포의 반경이 아니라 해당 영역으로 표시됩니다. 원의 면적은 반경의 제곱에 비례합니다. 즉, 그리기중인 버블 반경이 세 번째 데이터 포인트 크기의 제곱근에 비례하는지 확인해야합니다.

Chart.js에서 type 키의 값을 bubble 로 설정하여 버블 차트를 만들 수 있습니다. 다음은 버블 차트를 만드는 방법의 예입니다.

 var bubblechart = 새로운 차트 (Popcanvas, {
    유형 : '버블',
    데이터 : popdata,
    옵션 : ChartOptions
});

버블 차트를 사용하여 방에 다른 품목의 무게를 그 봅시다. 차트의 데이터는 객체 형식으로 전달되어야합니다. 데이터 객체에는 올바르게 그리기 위해 다음 인터페이스가 있어야합니다.

 {
    엑스:<number> ,,,
    와이:<number> ,,,
    아르 자형:<number>
}</number></number></number>

버블 차트와 기타 모든 차트의 중요한 차이점은 버블 반경이 차트와 함께 스케일링되지 않는다는 것입니다.

예를 들어, 막대 차트의 막대 너비는 차트의 크기에 따라 증가하거나 감소합니다. 이것은 버블 차트에서 발생하지 않습니다. 버블의 반경은 항상 지정한 정확한 픽셀 수와 같습니다. 이 차트 유형에서 반경은 실제로 실제 데이터를 나타내는 데 사용되기 때문에 이는 의미가 있습니다.

숲의 다른 위치에있는 사슴 무리의 수를 플로팅하기 위해 버블 차트를 만들어 봅시다.

 var popdata = {
  데이터 세트 : [
    {
      레이블 : [ "사슴 무리"],
      데이터 : [
        {x : 100, y : 0, r : 10},
        {x : 60, y : 30, r : 20},
        {x : 40, y : 60, r : 25},
        {x : 80, y : 80, r : 30},
        {x : 20, y : 30, r : 25},
        {x : 0, y : 100, r : 5}
      ],,
      BackgroundColor : "#FF9966"
    }
  ]]
};

여기의 반경은 실제 수의 제곱근에 비례하기 때문에 (80, 80)의 사슴 수는 (0, 100)의 사슴 수의 36 배입니다.

다른 모든 차트 유형과 마찬가지로 backgroundColor , borderColor 및 borderWidth 스키 키를 사용하여 배경색, 테두리 색상 및 드로잉 포인트의 테두리 너비를 제어 할 수 있습니다. 마찬가지로, hoverBackgroundColor , hoverBorderColor 및 hoverBorderWidth 키를 사용하여 호버 배경 색상, 호버 테두리 색상 및 호버 테두리 너비를 지정할 수도 있습니다.

hoverRadius 키를 사용하여 호버링 할 때 다른 기포에 추가 할 추가 반경을 지정할 수도 있습니다. 이 반경은 호버링 버블을 그리기 위해 원래 값에 추가 될 것임을 기억하십시오. 원래 버블의 반경이 10이고 hoverRadius 5로 설정되면 호버의 기포의 반경은 15입니다.

 var popdata = {
  데이터 세트 : [
    {
      레이블 : [ "사슴 무리"],
      데이터 : [
        {x : 100, y : 0, r : 10},
        {x : 60, y : 30, r : 20},
        {x : 40, y : 60, r : 25}
      ],,
      BackgroundColor : "#9966ff",
      HoverbackgroundColor : "#fffff",
      HoverborderColor : "#9966ff",
      Hoverborderwidth : 5,
      Hoverradius : 5
    },
    {
      레이블 : [ "기린 번호"],
      데이터 : [
        {x : 80, y : 80, r : 30},
        {x : 20, y : 30, r : 25},
        {x : 0, y : 100, r : 5}
      ],,
      BackgroundColor : "#ff6600",
      HoverbackgroundColor : "#fffff",
      HoverborderColor : "#ff6600",
      Hoverborderwidth : 5,
      Hoverradius : 5
    }
  ]]
};

var chartoptions = {
  플러그인 : {
    제목: {
      디스플레이 : True,
      위치 : "하단",
      텍스트 : "다른 핫스팟에있는 동물의 수",
      글꼴 : {
        크기 : 20
      }
    },
    전설: {
      위치 : "하단",
      정렬 : "센터"
    }
  },
  레이아웃 : {
    패딩 : 20
  }
};

위의 매개 변수는 다음 버블 차트를 생성합니다.

요약

이 자습서에서는 Chart.js에서 사용 가능한 세 가지 차트 유형을 배웠습니다. 이제 데이터를 플로팅하기 위해 적절한 차트 유형을 선택하고 다른 키에 대한 특정 값을 설정하여 모양을 제어 할 수 있어야합니다. 다음 튜토리얼에서는 다양한 차트 유형에 대한 스케일을 조작하는 방법을 배웁니다.

위 내용은 Chart.js : Pie, Donut 및 Bubble Charts를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!