개요
히스토그램은 숫자 데이터를 구간으로 그룹화하여 구간을 세분화된 열로 표시하는 차트입니다. 데이터 세트가 분포된 빈도를 나타내는 데이터 세트의 분포를 나타내는 데 사용됩니다.
Google 차트에서 자동으로 구간 수를 선택합니다. 모든 구간은 너비가 같고 구간의 데이터 포인트 수에 비례하여 높이가 다릅니다. 다른 면에서 히스토그램은 열 차트와 유사합니다.
예
다음은 공룡 길이 히스토그램입니다.
히스토그램에 따르면 가장 일반적인 bin은 10m 미만이고 공룡은 40m 이상에 불과합니다. 막대 위로 마우스를 가져가면 세이모사우루스 (Sipismosaurus)일 수 있습니다. 거대한 디플로도쿠스일 수도 있지만 고생물학자들은 잘 모릅니다.
이 히스토그램을 생성하는 코드는 아래와 같습니다. google.visualization.arrayToDataTable
를 사용하여 데이터를 정의한 후에는 차트가 google.visualization.Histogram
호출로 정의되고 draw
메서드로 그려집니다.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Dinosaur', 'Length'], ['Acrocanthosaurus (top-spined lizard)', 12.2], ['Albertosaurus (Alberta lizard)', 9.1], ['Allosaurus (other lizard)', 12.2], ['Apatosaurus (deceptive lizard)', 22.9], ['Archaeopteryx (ancient wing)', 0.9], ['Argentinosaurus (Argentina lizard)', 36.6], ['Baryonyx (heavy claws)', 9.1], ['Brachiosaurus (arm lizard)', 30.5], ['Ceratosaurus (horned lizard)', 6.1], ['Coelophysis (hollow form)', 2.7], ['Compsognathus (elegant jaw)', 0.9], ['Deinonychus (terrible claw)', 2.7], ['Diplodocus (double beam)', 27.1], ['Dromicelomimus (emu mimic)', 3.4], ['Gallimimus (fowl mimic)', 5.5], ['Mamenchisaurus (Mamenchi lizard)', 21.0], ['Megalosaurus (big lizard)', 7.9], ['Microvenator (small hunter)', 1.2], ['Ornithomimus (bird mimic)', 4.6], ['Oviraptor (egg robber)', 1.5], ['Plateosaurus (flat lizard)', 7.9], ['Sauronithoides (narrow-clawed lizard)', 2.0], ['Seismosaurus (tremor lizard)', 45.7], ['Spinosaurus (spiny lizard)', 12.2], ['Supersaurus (super lizard)', 30.5], ['Tyrannosaurus (tyrant lizard)', 15.2], ['Ultrasaurus (ultra lizard)', 30.5], ['Velociraptor (swift robber)', 1.8]]); var options = { title: 'Lengths of dinosaurs, in meters', legend: { position: 'none' }, }; var chart = new google.visualization.Histogram(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
라벨 (공룡 이름)은 생략할 수 있으며, 이 경우 도움말에 숫자 값만 표시됩니다.
색상 제어
다음은 전국 인구의 히스토그램입니다.
2억 개 이상의 국가에 인구가 1억 명 미만이며 그 후 심한 상승 현상이 나타납니다.
이 히스토그램은 colors
옵션을 사용하여 데이터를 녹색으로 그립니다.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
모든 Google 차트와 마찬가지로 색상은 영어 이름 또는 16진수 값으로 지정할 수 있습니다.
버킷 제어
기본적으로 Google 차트에서는 잘 알려진 히스토그램 알고리즘을 사용하여 버킷 크기를 자동으로 선택합니다. 그러나 경우에 따라 재정의해야 할 수 있으며 위의 차트는 예시입니다. 첫 번째 버킷에 국가가 너무 많아서 다른 국가에 있는 국가를 검사하기가 어렵습니다.
이러한 경우 히스토그램 차트는 두 가지 옵션, 즉 알고리즘을 재정의하고 버킷 크기를 하드 코딩하는 histogram.bucketSize
과 histogram.lastBucketPercentile
을 제공합니다. 두 번째 옵션에는 추가 설명이 필요합니다. 나머지 크기보다 높거나 낮은 값을 지정한 비율만큼 무시하도록 버킷 크기 계산을 변경합니다. 값은 여전히 히스토그램에 포함되지만 버케팅 방식에는 영향을 미치지 않습니다. 이는 이상점이 자체 버킷에 포함되지 않도록 할 때 유용하며, 대신 첫 번째 또는 마지막 버킷으로 그룹화됩니다.
위 차트에서는 버킷 크기를 계산할 때 상위 5개 및 하위 5% 값을 무시했습니다. 값은 계속 차트로 표시됩니다. 변경된 사항은 버킷 크기이지만 더 읽기 쉬운 히스토그램이 만들어집니다.
이 예에서는 '미러 로그' 배율을 사용하도록 세로축의 크기를 변경하는 방법도 보여줍니다. 이는 작은 꼬리의 롱테일이 있는 데이터를 차트로 표시하는 데에도 도움이 됩니다.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
보시다시피 계산에서 상단과 하단 5퍼센트를 삭제하면 버킷 크기가 100,000,000개가 아닌 10,000,000이 됩니다. 10,000,000이라는 버킷 크기가 원하는 것임을 알고 있다면 histogram.bucketSize
를 사용하여 그렇게 할 수 있습니다.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { bucketSize: 10000000 } };
다음 예시에서는 버킷 범위를 확장하고 버킷 사이에 간격 없이 더 많은 버킷을 표시하는 방법을 보여줍니다. maxNumBuckets
옵션을 사용하여 기본 버킷 수를 늘릴 수 있습니다. histogram.minValue
및 histogram.maxValue
옵션은 버킷 범위를 확장하지만 이 범위를 벗어나는 데이터가 있는 경우에는 이 옵션이 범위를 축소하지 않습니다.
또한 이 예에서는 hAxis
에 명시적인 ticks
옵션을 사용하여 각 버킷에 표시할 체크표시를 지정할 수 있음을 보여줍니다. 버킷 자체에는 영향을 주지 않으며 틱이 표시되는 방식만 변경됩니다.
또한 버킷 수가 시각적 아티팩트 없이 더 정확하게 맞도록 chartArea.width
를 지정합니다. 이 예에 사용할 수 있는 옵션은 다음과 같습니다.
var options = { title: 'Approximating Normal Distribution', legend: { position: 'none' }, colors: ['#4285F4'], chartArea: { width: 405 }, hAxis: { ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1] }, bar: { gap: 0 }, histogram: { bucketSize: 0.01, maxNumBuckets: 400, minValue: -1, maxValue: 1 } };
여러 시리즈
다음은 표준 모델에 따른 아원자 입자의 전하 히스토그램입니다.
위 차트에는 모든 파티클을 포함하는 하나의 시리즈가 있습니다. 아원성 입자는 쿼크, 렙톤, 보손의 4개 그룹으로 나눌 수 있습니다. 각각을 하나의 시리즈로 생각해 보겠습니다.
이 차트에서는 아원자 입자의 네 가지 유형마다 서로 다른 계열 (따라서 색상)을 사용합니다. interpolateNulls
를 false
로 명시적으로 설정하여 null 값 (시리즈 길이가 동일하지 않으므로 필요)이 표시되지 않도록 합니다. 또한 legend.maxLines
를 설정하여 범례에 다른 줄을 추가합니다.
var data = google.visualization.arrayToDataTable([ ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'], [2/3, -1, 0, 0], [2/3, -1, 0, null], [2/3, -1, 0, null], [-1/3, 0, 1, null], [-1/3, 0, -1, null], [-1/3, 0, null, null], [-1/3, 0, null, null] ]); var options = { title: 'Charges of subatomic particles', legend: { position: 'top', maxLines: 2 }, colors: ['#5C3292', '#1A8763', '#871B47', '#999999'], interpolateNulls: false, };
로드 중
google.charts.load
패키지 이름은 "corechart"
입니다.
google.charts.load("current", {packages: ["corechart"]});
시각화의 클래스 이름은 google.visualization.Histogram
입니다.
var visualization = new google.visualization.Histogram(container);
데이터 형식
히스토그램 데이터 테이블을 채우는 방법에는 두 가지가 있습니다. 시리즈가 하나만 있는 경우:
var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Name 1', number1], ['Name 2', number2], ['Name 3', number3], ... ]);
여러 개의 시리즈가 있는 경우:
var data = google.visualization.arrayToDataTable([ ['Series Name 1', 'Series Name 2', 'Series Name 3', ...], [series1_number1, series2_number1, series3_number1, ...], [series1_number2, series2_number2, series3_number2, ...], [series1_number3, series2_number3, series3_number3, ...], ... ]);
현재 히스토그램에는 열 역할(선택사항)이 지원되지 않습니다.
구성 옵션
이름 | |
---|---|
애니메이션 재생 시간 |
애니메이션의 재생 시간(밀리초)입니다. 자세한 내용은 애니메이션 문서를 참고하세요. 유형: 숫자
기본값: 0
|
애니메이션.이징 |
애니메이션에 적용되는 이징 함수입니다. 사용할 수 있는 옵션은 다음과 같습니다.
유형: 문자열
기본값: 'linear'
|
애니메이션 시작 모드 |
최초 그리기 시 차트에 애니메이션을 적용할지 결정합니다. 유형: 부울
기본값 false
|
축 제목 위치 |
차트 영역과 비교한 축 제목의 위치입니다. 지원 값:
유형: 문자열
기본값: 'out'
|
backgroundColor |
차트의 기본 영역 배경색입니다. 단순 HTML 색상 문자열(예: 유형: 문자열 또는 객체
기본값: 'white'
|
배경 색상.획 |
차트 테두리의 색상으로, HTML 색상 문자열입니다. 유형: 문자열
기본값: '#666'
|
배경 색상.획 너비 |
테두리 너비(픽셀)입니다. 유형: 숫자
기본값: 0
|
배경 색상.채우기 |
차트 채우기 색상이 HTML 색상 문자열로 표시됩니다. 유형: 문자열
기본값: 'white'
|
bar.groupWidth |
다음 그룹의 형식으로 지정된 막대 그룹의 너비입니다.
유형: 숫자 또는 문자열
기본값: 골든 비율(약 '61.8%')입니다.
|
차트 영역 |
차트 영역의 위치와 크기를 구성하기 위한 구성원이 있는 객체입니다 (축과 범례를 제외하고 차트 자체가 그려짐). 숫자 또는 숫자 다음에 %가 오는 두 가지 형식이 지원됩니다. 간단한 숫자는 픽셀 단위 값, 숫자 다음에 % 가 백분율로 표시됩니다. 예: 유형: 객체
기본값: null
|
차트 영역 배경 색상 |
차트 영역 배경 색상입니다. 문자열은 16진수 문자열(예: '#fdc') 또는 영어 색상 이름이어야 합니다. 객체가 사용될 때 다음 속성을 제공할 수 있습니다.
유형: 문자열 또는 객체
기본값: 'white'
|
차트 영역 |
왼쪽 테두리에서 차트를 그리는 거리 유형: 숫자 또는 문자열
기본값: 자동
|
차트 영역.top |
위쪽 테두리에서 차트를 그리는 거리 유형: 숫자 또는 문자열
기본값: 자동
|
차트 영역 너비 |
차트 영역 너비 유형: 숫자 또는 문자열
기본값: 자동
|
차트 영역 |
차트 영역 높이를 나타냅니다. 유형: 숫자 또는 문자열
기본값: 자동
|
색상 |
차트 요소에 사용할 색상입니다. 문자열 배열입니다. 여기서 각 요소는 HTML 색상 문자열입니다(예: 유형: 문자열 배열
기본값: 기본 색상
|
데이터 불투명도 |
데이터 포인트의 투명도(1.0은 완전히 불투명, 0.0은 완전 투명)입니다. 분산형, 히스토그램, 막대 그래프, 열 차트에서는 분산형 데이터를 나타내는 분산형 데이터와 다른 차트의 직사각형을 나타냅니다. 선 및 영역 차트와 같이 데이터를 선택하여 점이 생성되는 차트에서는 마우스 오버 또는 선택 시 표시되는 원을 나타냅니다. 콤보 차트는 두 가지 동작을 모두 보여주며 이 옵션은 다른 차트에는 영향을 미치지 않습니다. 추세선의 불투명도를 변경하려면 추세선 불투명도를 참고하세요. 유형: 숫자
기본값: 1.0
|
enableInteractivity |
차트에서 사용자 기반 이벤트를 발생시키는지 또는 사용자 상호작용에 반응하는지 여부 false인 경우 차트에서 '선택' 또는 다른 상호작용 기반 이벤트가 발생하지는 않지만 (준비 또는 오류 이벤트는 발생함) 마우스 오버 텍스트가 표시되거나 사용자 입력에 따라 변경되지 않습니다. 유형: 부울
기본값: true
|
포커스 타겟 |
마우스 오버에 포커스를 받는 항목의 유형입니다. 또한 마우스 클릭으로 선택되는 항목과 이벤트와 연결된 데이터 테이블 요소에 영향을 줍니다. 다음 중 하나일 수 있습니다.
focusTarget '카테고리' 도움말에서 모든 카테고리 값을 표시합니다. 이는 다른 계열의 값을 비교하는 데 유용할 수 있습니다. 유형: 문자열
기본값: 'datum'
|
fontSize |
차트에 있는 모든 텍스트의 기본 글꼴 크기(픽셀)입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다. 유형: 숫자
기본값: 자동
|
글꼴 이름 |
차트의 모든 텍스트의 기본 글꼴입니다. 특정 차트 요소의 속성을 사용하여 재정의할 수 있습니다. 유형: 문자열
기본값: 'Arial'
|
강제 IFrame |
인라인 프레임 내에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트는 i-frame에 그려집니다. 유형: 부울
기본값: false
|
축 |
다양한 가로축 요소를 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. { title: 'Hello', titleTextStyle: { color: '#FF0000' } } 유형: 객체
기본값: null
|
hAxis.gridlines |
가로축에 격자선을 구성하는 속성이 있는 객체 가로축 격자선은 수직으로 그려집니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {color: '#333', minSpacing: 20} 유형: 객체
기본값: null
|
hAxis.gridlines.color |
차트 영역 내부의 수평 격자선 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: '#CCC'
|
hAxis.gridlines.count |
차트 영역 내부의 대략적인 가로 격자선 수입니다.
유형: 숫자
기본값: -1
|
hAxis.gridlines.interval |
인접한 격자선 사이의 크기 배열 (픽셀이 아닌 데이터 값)입니다. 이 옵션은 현재 숫자 축에만 해당되지만 날짜와 시간에만 사용되는 유형: 1과 10 사이의 숫자이며 10은 포함되지 않습니다.
기본값: 컴퓨팅
|
hAxis.gridlines.minSpacing |
hAxis 주요 그리드선 사이의 최소 화면 공간(픽셀)입니다.
주요 그리드의 기본값은 선형 배율의 경우 유형: 숫자
기본값: 컴퓨팅
|
hAxis.gridlines.multiple |
모든 격자선 및 틱 값은 이 옵션 값의 배수여야 합니다. 간격과 달리 배수의 10배는 고려하지 않습니다.
따라서 유형: 숫자
기본값: 1
|
hAxis.gridlines.units |
차트로 계산한 그리드와 함께 사용하는 경우 날짜/날짜/날짜/시간 데이터 유형의 다양한 측면에서 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } 자세한 내용은 날짜 및 시간을 참고하세요. 유형: 객체
기본값: null
|
hAxis.minorGridlines |
hAxis.gridlines 옵션과 유사하게 가로 축에서 보조 그리드를 구성하는 구성원이 있는 객체입니다. 유형: 객체
기본값: null
|
hAxis.minorGridlines.color |
차트 영역 내 가로로 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: 격자선과 배경 색상의 혼합
|
hAxis.minorGridlines.count |
유형: 숫자
기본값: 1
|
hAxis.minorGridlines.interval |
smallGridlines.interval 옵션은 주요 격자선 간격 옵션과 비슷하지만 선택한 간격은 항상 주요 격자선 간격의 짝수 제수가 됩니다.
선형 배율의 기본 간격은 유형: 숫자
기본값: 1
|
hAxis.minorGridlines.minSpacing |
인접한 작은 격자선 사이와 보조 격자선 사이에 필요한 최소 공간(픽셀)입니다. 기본값은 선형 배율의 경우 주요 그리드선의 minSpacing의 1/2이고, 로그 배율의 경우 minSpacing의 1/5입니다. 유형: 숫자
기본값:계산됨
|
hAxis.minorGridlines.multiple |
주요 유형: 숫자
기본값: 1
|
hAxis.minorGridlines.units |
차트에서 생성된 smallGridlines와 함께 사용할 경우 날짜/날짜/시간/날짜 데이터 유형의 다양한 측면에 대한 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } 자세한 내용은 날짜 및 시간을 참고하세요. 유형: 객체
기본값: null
|
hAxis.textPosition |
차트 영역을 기준으로 가로축 텍스트의 위치입니다. 지원되는 값은 'out', 'in', 'none'입니다. 유형: 문자열
기본값: 'out'
|
hAxis.textStyle |
가로축 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.title |
가로축의 제목을 지정하는 유형: 문자열
기본값: null
|
hAxis.titleTextStyle |
가로축 제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
false인 경우 차트 컨테이너가 라벨을 자르도록 허용하지 않고 가장 바깥쪽 라벨을 숨깁니다. true인 경우 라벨 자르기가 허용됩니다. 유형: 부울
기본값: false
|
hAxis.slantedText |
true인 경우 가로축 텍스트를 비스듬하게 그려서 축을 따라 더 많은 텍스트를 맞춥니다. false인 경우 가로축 텍스트를 수직으로 그립니다. 기본 동작은 똑바로 그려질 때 텍스트를 모두 맞출 수 없는 경우 텍스트를 기울이는 것입니다. 이 옵션은 유형: 부울
기본값: 자동
|
hAxis.slantedTextAngle |
기울어진 가로 축 텍스트의 각도입니다. 유형: 숫자, -90~90
기본값: 30
|
hAxis.maxAlternation |
가로축 텍스트의 최대 수준 수입니다. 축 텍스트 라벨이 너무 복잡하면 서버에서 라벨을 더 가깝게 맞추기 위해 인접 라벨을 위아래로 이동할 수 있습니다. 이 값은 사용할 레벨 수를 가장 많이 지정합니다. 라벨이 중복되지 않는 경우 서버에서 더 적은 레벨을 사용할 수 있습니다. 날짜 및 시간의 기본값은 1입니다. 유형: 숫자
기본값: 2
|
hAxis.maxTextLines |
텍스트 라벨에 허용되는 최대 행 수입니다. 라벨이 너무 길면 라벨이 여러 줄에 걸쳐 있을 수 있으며 기본적으로 줄 수는 사용 가능한 공간의 높이로 제한됩니다. 유형: 숫자
기본값: 자동
|
hAxis.minTextSpacing |
인접한 텍스트 라벨 2개 이상에 허용되는 최소 가로 간격(픽셀)입니다. 라벨 간격이 너무 좁거나 너무 길 경우 간격이 이 임계값 아래로 떨어질 수 있으며 이 경우 라벨이 정리되지 않은 측정값 중 하나가 적용됩니다 (예: 라벨 자르기 또는 일부 라벨 삭제). 유형: 숫자
기본값:
hAxis.textStyle.fontSize 의 값 |
hAxis.showTextevery |
표시할 가로축 라벨의 수입니다. 여기서 1은 모든 라벨을, 2는 다른 모든 라벨을 표시하는 식입니다. 기본값은 겹치지 않고 최대한 많은 라벨을 표시하는 것입니다. 유형: 숫자
기본값: 자동
|
hAxis.viewWindowMode |
차트 영역 내의 값을 렌더링하도록 가로축의 크기를 조정하는 방법을 지정합니다. 다음과 같은 문자열 값이 지원됩니다.
유형: 문자열
기본값: 'pretty'와 동일하지만
haxis.viewWindow.min 및 haxis.viewWindow.max 가 사용됩니다.
|
hAxis.viewWindow |
가로축의 자르기 범위를 지정합니다. 유형: 객체
기본값: null
|
hAxis.viewWindow.max |
자르기 창이 끝나는 0 기반 행 색인입니다. 이 색인 이상의 데이터 포인트는 잘립니다.
유형: 숫자
기본값: 자동
|
hAxis.viewWindow.min |
자르기 창이 시작되는 0 기반 행 색인입니다. 이보다 낮은 색인의 데이터 포인트는 잘립니다.
유형: 숫자
기본값: 자동
|
히스토그램.bucketSize |
알고리즘에 따라 결정되도록 하는 대신 각 히스토그램 막대의 크기를 하드 코딩합니다. 유형: 숫자
기본값: 자동
|
히스토그램.hideBucketItems |
히스토그램 블록 사이의 얇은 분할을 생략하여 일련의 실선 막대로 만듭니다. 유형: 부울
기본값: false
|
히스토그램.lastBucketPercentile |
히스토그램의 버킷 크기를 계산할 때 상단 및 하단 유형: 숫자
기본값: 0
|
히스토그램.minValue |
이 값을 포함하도록 버킷 범위를 확장합니다. 유형: 숫자
기본값: 자동 - 데이터 최솟값 사용
|
히스토그램.maxValue |
이 값을 포함하도록 버킷 범위를 확장합니다. 유형: 숫자
기본값: 자동 - 데이터 최대 사용
|
히스토그램.numBucketsRule |
기본 버킷 수를 계산하는 방법 가능한 값은 다음과 같습니다.
유형: 문자열
기본값:
'sqrt' |
높이 |
차트의 높이(픽셀)입니다. 유형: 숫자
기본값: 값을 포함하는 요소의 높이
|
interpolateNulls |
누락된 포인트의 값을 추측할지 여부입니다. true인 경우 인접한 지점을 기준으로 누락된 데이터의 값을 추측합니다. false인 경우 알 수 없는 지점에 줄에서 줄바꿈이 유지됩니다.
이 옵션은 유형: 부울
기본값: false
|
isStacked |
true로 설정하면 각 도메인 값에서 모든 계열의 요소를 스택합니다. 참고: 열, 영역, SteppedArea 차트에서 Google 차트는 시리즈 요소의 스택에 더 잘 일치하도록 범례 항목의 순서를 반대로 바꿉니다 (예: 시리즈 0은 맨 아래 범례 항목임). 이는 막대 차트에 적용되지 않습니다.
100% 스태킹의 경우 각 요소의 계산된 값이 실제 값 다음에 도움말에 표시됩니다.
타겟 축은 기본적으로
100% 스택은 유형: 부울/문자열
기본값: false
|
전설 |
범례의 다양한 측면을 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {position: 'top', textStyle: {color: 'blue', fontSize: 16}} 유형: 객체
기본값: null
|
범례.alignment |
범례의 정렬 다음 중 하나일 수 있습니다.
시작, 가운데, 끝은 범례의 스타일(세로 또는 가로)을 기준으로 합니다. 예를 들어 '오른쪽' 범례에서 '시작'과 '종료'는 각각 상단과 하단에 있고, '상단' 범례의 경우 '시작'과 '종료'는 영역의 왼쪽과 오른쪽에 있습니다. 기본값은 범례의 위치에 따라 다릅니다. '하단' 범례의 기본값은 '가운데'이고 다른 범례의 기본값은 '시작'입니다. 유형: 문자열
기본값: 자동
|
범례.maxLines |
범례의 최대 행 수입니다. 범례에 선을 추가하려면 이 값을 1보다 큰 수로 설정하세요. 참고: 렌더링된 실제 선 수를 결정하는 데 사용되는 정확한 로직은 여전히 유동적입니다. 이 옵션은 현재 범례가 '위'에 있는 경우에만 작동합니다. 유형: 숫자
기본값: 1
|
범례.pageIndex |
범례의 처음 선택한 0 기반 페이지 색인입니다. 유형: 숫자
기본값: 0
|
범례.position |
범례의 위치입니다. 다음 중 하나일 수 있습니다.
유형: 문자열
기본값: '오른쪽'
|
범례.textStyle |
범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
방향 |
차트의 방향입니다. 유형: 문자열
기본값: '수평'
|
역카테고리 |
true로 설정하면 시리즈를 오른쪽에서 왼쪽으로 그립니다. 기본값은 왼쪽에서 오른쪽으로 그리는 것입니다. 유형: 부울
기본값: false
|
시리즈 |
차트에서 각각 해당 계열의 형식을 설명하는 객체의 배열입니다. 계열의 기본값을 사용하려면 빈 객체 {}를 지정합니다. 시리즈 또는 값이 지정되지 않은 경우 전역 값이 사용됩니다. 각 객체는 다음 속성을 지원합니다.
객체의 배열을 각각 순서대로 지정할 수 있고 각 하위 요소가 적용되는 시리즈를 나타내는 숫자 키를 갖는 객체를 지정할 수도 있습니다. 예를 들어 다음 두 선언은 동일하며 첫 번째 시리즈를 검은색 및 범례에 없는 것으로 선언하고 네 번째 시리즈를 빨간색 및 범례에 없는 것으로 선언합니다. series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } 유형: 객체 배열 또는 중첩된 객체가 있는 객체
기본값: {}
|
테마 |
테마는 특정 차트 동작 또는 시각적 효과를 달성하기 위해 함께 작동하는 사전 정의된 옵션 값 집합입니다. 현재 하나의 테마만 사용할 수 있습니다.
유형: 문자열
기본값: null
|
title |
차트 위에 표시할 텍스트입니다. 유형: 문자열
기본값: 제목 없음
|
titlePosition |
차트 영역과 비교한 차트 제목의 위치입니다. 지원 값:
유형: 문자열
기본값: 'out'
|
제목 텍스트 스타일 |
제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
도움말 |
다양한 도움말 요소를 구성하기 위한 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {textStyle: {color: '#FF0000'}, showColorCode: true} 유형: 객체
기본값: null
|
tooltip.isHtml |
true로 설정하면 SVG 렌더링이 아닌 HTML 렌더링 도움말을 사용합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요. 참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠 맞춤설정은 풍선형 차트 시각화에서 지원되지 않습니다. 유형: 부울
기본값: false
|
tooltip.showColorCode |
true인 경우 도움말의 계열 정보 옆에 색상이 있는 정사각형을 표시합니다. 유형: 부울
기본값: 자동
|
tooltip.textStyle |
도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
도움말을 표시하는 사용자 상호작용:
유형: 문자열
기본값: '포커스'
|
Vaxes |
차트에 여러 개의 세로축이 있는 경우 개별 세로축의 속성을 지정합니다.
각 하위 객체는
세로축이 여러 개 있는 차트를 지정하려면 먼저 { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
이 속성은 객체일 수도 있고 배열일 수도 있습니다. 객체는 각각 정의되는 축을 지정하는 숫자 라벨이 있는 객체의 모음이며, 위와 같은 형식입니다. 배열은 객체의 배열이며 축당 하나씩입니다. 예를 들어 다음 배열 스타일 표기법은 위에 표시된 vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] 유형: 객체 배열 또는 하위 객체가 있는 객체
기본값: null
|
v축 |
다양한 세로축 요소를 구성하는 구성원이 있는 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {title: 'Hello', titleTextStyle: {color: '#FF0000'}} 유형: 객체
기본값: null
|
vAxis.baseline |
유형: 숫자
기본값: 자동
|
vAxis.baselineColor |
세로축의 기준 색상을 지정합니다. 모든 HTML 색상 문자열(예: 유형: 숫자
기본값: 'black'
|
vAxis.direction |
세로축을 따라 값이 증가하는 방향입니다. 기본적으로 낮은 값은 차트 하단에 있습니다. 유형: 1 또는 -1
기본값: 1
|
vAxis.format |
숫자 축 라벨의 형식 문자열입니다. ICU 패턴 집합의 하위 집합입니다.
예를 들어
라벨에 적용된 실제 형식은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드하기를 참고하세요.
틱 값 및 격자선을 계산할 때 모든 관련 격자선 옵션의 여러 대체 조합이 고려되며 형식이 지정된 틱 라벨이 중복되거나 중복되는 경우 대체가 거부됩니다.
따라서 정수 눈금 값만 표시하려면 유형: 문자열
기본값: 자동
|
vAxis.gridlines |
세로축에 격자선 구성을 위한 구성원이 있는 객체입니다. 세로축 격자선은 수평으로 그려집니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {color: '#333', minSpacing: 20} 유형: 객체
기본값: null
|
vAxis.gridlines.color |
차트 영역 내부의 수직 격자선 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: '#CCC'
|
vAxis.gridlines.count |
차트 영역 내부의 대략적인 가로 격자선 수입니다.
유형: 숫자
기본값: -1
|
vAxis.gridlines.interval |
인접한 격자선 사이의 크기 배열 (픽셀이 아닌 데이터 값)입니다. 이 옵션은 현재 숫자 축에만 해당되지만 날짜와 시간에만 사용되는 유형: 1과 10 사이의 숫자이며 10은 포함되지 않습니다.
기본값: 컴퓨팅
|
vAxis.gridlines.minSpacing |
hAxis 주요 그리드선 사이의 최소 화면 공간(픽셀)입니다.
주요 그리드의 기본값은 선형 배율의 경우 유형: 숫자
기본값: 컴퓨팅
|
vAxis.gridlines.multiple |
모든 격자선 및 틱 값은 이 옵션 값의 배수여야 합니다. 간격과 달리 배수의 10배는 고려하지 않습니다.
따라서 유형: 숫자
기본값: 1
|
vAxis.gridlines.units |
차트로 계산한 그리드와 함께 사용하는 경우 날짜/날짜/날짜/시간 데이터 유형의 다양한 측면에서 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } 자세한 내용은 날짜 및 시간을 참고하세요. 유형: 객체
기본값: null
|
vAxis.minorGridlines |
vAxis.gridlines 옵션과 비슷하게 수직 축에서 보조 그리드를 구성하는 구성원이 있는 객체입니다. 유형: 객체
기본값: null
|
vAxis.minorGridlines.color |
차트 영역 내부의 수직 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: 격자선과 배경 색상의 혼합
|
vAxis.minorGridlines.count |
MiniGridlines.count 옵션은 개수를 0으로 설정하여 보조 격자선을 사용 중지하는 경우를 제외하고 대부분 지원 중단되었습니다. 보조 격자선의 수는 주요 격자선 (vAxis.gridlines.interval 참조)과 필요한 최소 공간(vAxis.minorGridlines.minSpacing 참조) 사이의 간격에 따라 다릅니다. 유형: 숫자
기본값: 1
|
vAxis.minorGridlines.interval |
smallGridlines.interval 옵션은 주요 격자선 간격 옵션과 비슷하지만 선택한 간격은 항상 주요 격자선 간격의 짝수 제수가 됩니다.
선형 배율의 기본 간격은 유형: 숫자
기본값: 1
|
vAxis.minorGridlines.minSpacing |
인접한 작은 격자선 사이와 보조 격자선 사이에 필요한 최소 공간(픽셀)입니다. 기본값은 선형 배율의 경우 주요 그리드선의 minSpacing의 1/2이고, 로그 배율의 경우 minSpacing의 1/5입니다. 유형: 숫자
기본값:계산됨
|
vAxis.minorGridlines.multiple |
주요 유형: 숫자
기본값: 1
|
vAxis.minorGridlines.units |
차트에서 생성된 smallGridlines와 함께 사용할 경우 날짜/날짜/시간/날짜 데이터 유형의 다양한 측면에 대한 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } 자세한 내용은 날짜 및 시간을 참고하세요. 유형: 객체
기본값: null
|
vAxis.logScale |
true인 경우 세로축을 로그 배율로 만듭니다. 참고: 모든 값은 양수여야 합니다. 유형: 부울
기본값: false
|
vAxis.scaleType |
유형: 문자열
기본값: null
|
vAxis.textPosition 클래스의 생성자 |
차트 영역을 기준으로 세로축 텍스트의 위치입니다. 지원되는 값은 'out', 'in', 'none'입니다. 유형: 문자열
기본값: 'out'
|
vAxis.textStyle |
세로축 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
자동으로 생성된 Y축 틱을 지정된 배열로 대체합니다. 배열의 각 요소는 유효한 시간 표시 값 (예: 숫자, 날짜, 날짜/시간 또는 시간) 또는 객체여야 합니다. 객체인 경우 틱 값의
재정의할 예:
유형: 요소 배열
기본값: 자동
|
vAxis.title |
세로 축의 제목을 지정하는 유형: 문자열
기본값: 제목 없음
|
vAxis.titleTextStyle |
세로축 제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
세로축의 최댓값을 지정된 값으로 이동합니다. 대부분의 차트에서 위쪽으로 이동합니다. 데이터의 최대 y값보다 작은 값으로 설정하면 무시됩니다.
유형: 숫자
기본값: 자동
|
vAxis.minValue |
세로축의 최솟값을 지정된 값으로 이동합니다. 대부분의 차트에서는 아래로 이동합니다. 이 값이 데이터의 최소 y값보다 크게 설정되면 무시됩니다.
유형: 숫자
기본값: null
|
vAxis.viewWindowMode |
세로축을 조정하여 차트 영역 내의 값을 렌더링하는 방법을 지정합니다. 다음과 같은 문자열 값이 지원됩니다.
유형: 문자열
기본값: 'pretty'와 동일하지만
vaxis.viewWindow.min 및 vaxis.viewWindow.max 가 사용됩니다.
|
vAxis.viewWindow |
세로축의 자르기 범위를 지정합니다. 유형: 객체
기본값: null
|
vAxis.viewWindow.max |
렌더링할 최대 세로 데이터 값입니다.
유형: 숫자
기본값: 자동
|
vAxis.viewWindow.min |
렌더링할 최소 세로 데이터 값입니다.
유형: 숫자
기본값: 자동
|
너비 |
차트의 너비(픽셀)입니다. 유형: 숫자
기본값: 포함하는 요소의 너비
|
방법
메서드 | |
---|---|
draw(data, options) |
차트를 그립니다. 차트는 반환 유형: 없음
|
getAction(actionID) |
요청된 반환 유형: 객체
|
getBoundingBox(id) |
차트 요소
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출하세요. 반환 유형: 객체
|
getChartAreaBoundingBox() |
차트 콘텐츠의 왼쪽, 상단, 너비, 높이가 포함된 객체를 반환합니다(라벨 및 범례 제외).
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출하세요. 반환 유형: 객체
|
getChartLayoutInterface() |
차트 및 그 요소의 화면 내 게재위치 정보가 포함된 객체를 반환합니다. 반환된 객체에서 다음 메서드를 호출할 수 있습니다.
차트를 그린 후에 이 메서드를 호출하세요. 반환 유형: 객체
|
getHAxisValue(xPosition, optional_axis_index) |
차트 컨테이너의 왼쪽 가장자리로부터의 픽셀 오프셋인 예: 차트를 그린 후에 이 메서드를 호출하세요. 반환 유형: 숫자
|
getImageURI() |
이미지 URI로 직렬화된 차트를 반환합니다. 차트를 그린 후에 이 메서드를 호출하세요. PNG 차트 인쇄를 참조하세요. 반환 유형: 문자열
|
getSelection() |
선택한 차트 항목의 배열을 반환합니다.
선택 가능한 항목은 막대, 범례 항목, 카테고리입니다.
이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다.
반환 유형: 선택 요소의 배열
|
getVAxisValue(yPosition, optional_axis_index) |
차트 컨테이너의 상단 가장자리에서 아래로 내려가는 픽셀 오프셋인 예: 차트를 그린 후에 이 메서드를 호출하세요. 반환 유형: 숫자
|
getXLocation(dataValue, optional_axis_index) |
차트 컨테이너의 왼쪽 가장자리를 기준으로 예: 차트를 그린 후에 이 메서드를 호출하세요. 반환 유형: 숫자
|
getYLocation(dataValue, optional_axis_index) |
차트 컨테이너의 상단 가장자리를 기준으로 한 예: 차트를 그린 후에 이 메서드를 호출하세요. 반환 유형: 숫자
|
removeAction(actionID) |
차트에서 요청된 반환 유형:
none |
setAction(action) |
사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다.
모든 팁 작업은 차트의 반환 유형:
none |
setSelection() |
지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다.
선택 가능한 항목은 막대, 범례 항목, 카테고리입니다.
이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다.
반환 유형: 없음
|
clearChart() |
차트를 삭제하고 할당된 모든 리소스를 해제합니다. 반환 유형: 없음
|
이벤트
이러한 이벤트를 사용하는 방법에 관한 자세한 내용은 기본 상호작용, 이벤트 처리, 실행 이벤트를 참고하세요.
이름 | |
---|---|
animationfinish |
전환 애니메이션이 완료되면 실행됩니다. 속성: 없음
|
click |
사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 클릭하는 시점을 식별하는 데 사용할 수 있습니다. 속성: targetID
|
error |
차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. 속성: ID, 메시지
|
legendpagination |
사용자가 범례 페이지로 나누기 화살표를 클릭하면 발생됩니다. 현재 범례의 0 기반 페이지 색인과 총 페이지 수를 전달합니다. 속성: currentPageIndex, totalPages
|
onmouseover |
사용자가 시각적 개체 위로 마우스를 가져가면 시작됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다. 막대는 데이터 표의 셀, 열의 범례 항목 (행 색인은 null), 행과 카테고리 (열 색인은 null)의 상관관계를 나타냅니다. 속성: 행, 열
|
onmouseout |
사용자가 시각적 항목에서 마우스를 치우면 실행됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다. 막대는 데이터 표의 셀, 열의 범례 항목 (행 색인은 null), 행과 카테고리 (열 색인은 null)의 상관관계를 나타냅니다. 속성: 행, 열
|
ready |
차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 시작됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.