Highcharts로 인구 피라미드 만들기
16774 단어 JavaScripthighcharts
학생 실습으로 저는 트위터 계정의 종합 활용 도구SocialDog 개발에 종사합니다.
JS 차트에서 추천한 하이차트를 써볼게요.
Highcharts란?
공식 사이트
JavaScript용 차트 라이브러리
Free for Non-Commercial이므로 비즈니스 용도에 유의해야 합니다.
Open SourceGithub가 공개됐기 때문에.
인구 피라미드 그래프
세대별 인구와 남녀 비율을 나타내는 도표
일본인구통계-위키백과
나는 내가 한 번 본 적이 있다고 생각한다.이번에는 하이컷으로 이쪽을 그려볼게요.
시위 행진을 찾다
어쨌든 공식적인 프레젠테이션에서 비슷한 그래프가 있는지 찾아볼게요.
Bar with negative stack는 목표와 매우 가깝다.
시위 행진만 보면 소스 코드도 쉬워요. 조금만 고치면 해결돼요!망했다!
첫 번째 이미지처럼 Y축은 연대가 중앙으로 이동하여 공통화시킨다.
그러나 문서만 놓고 보면 공식적으로 대응하지는 않은 것으로 보인다.
뭘 하고 싶은데.
아무리 해도 표현할 수 없는 것은 반복적인 실험의 결과이다.
(코드를 간소화하기 위해 대략적인 부분도 있다)
나는 한 번 보면 문제가 없는 도표라고 생각한다.
데모, 소스 코드
데모(CodePen)
See the Pen BGvrwm by matamatak ( @matamatak ) on CodePen .
소스 코드
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="left"></div>
<div id="right"></div>
</div>
JS
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('left', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
name: 'man',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}]
});
Highcharts.chart('right', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
color: '#ccaadd',
name: 'woman',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
},]
});
CSS
#left,
#right {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
디테일
두 개의 도표를 준비해서 방법을 강구하다.그중에 하나를 숨겨보도록 하겠습니다.br/>
legend(그림)를 누르면 해당 도표를 표시하거나 숨길 수 있습니다p>
세대별 인구와 남녀 비율을 나타내는 도표
일본인구통계-위키백과
나는 내가 한 번 본 적이 있다고 생각한다.이번에는 하이컷으로 이쪽을 그려볼게요.
시위 행진을 찾다
어쨌든 공식적인 프레젠테이션에서 비슷한 그래프가 있는지 찾아볼게요.
Bar with negative stack는 목표와 매우 가깝다.
시위 행진만 보면 소스 코드도 쉬워요. 조금만 고치면 해결돼요!망했다!
첫 번째 이미지처럼 Y축은 연대가 중앙으로 이동하여 공통화시킨다.
그러나 문서만 놓고 보면 공식적으로 대응하지는 않은 것으로 보인다.
뭘 하고 싶은데.
아무리 해도 표현할 수 없는 것은 반복적인 실험의 결과이다.
(코드를 간소화하기 위해 대략적인 부분도 있다)
나는 한 번 보면 문제가 없는 도표라고 생각한다.
데모, 소스 코드
데모(CodePen)
See the Pen BGvrwm by matamatak ( @matamatak ) on CodePen .
소스 코드
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="left"></div>
<div id="right"></div>
</div>
JS
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('left', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
name: 'man',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}]
});
Highcharts.chart('right', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
color: '#ccaadd',
name: 'woman',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
},]
});
CSS
#left,
#right {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
디테일
두 개의 도표를 준비해서 방법을 강구하다.그중에 하나를 숨겨보도록 하겠습니다.br/>
legend(그림)를 누르면 해당 도표를 표시하거나 숨길 수 있습니다p>
아무리 해도 표현할 수 없는 것은 반복적인 실험의 결과이다.
(코드를 간소화하기 위해 대략적인 부분도 있다)
나는 한 번 보면 문제가 없는 도표라고 생각한다.
데모, 소스 코드
데모(CodePen)
See the Pen BGvrwm by matamatak ( @matamatak ) on CodePen .
소스 코드
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="left"></div>
<div id="right"></div>
</div>
JS
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('left', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
name: 'man',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}]
});
Highcharts.chart('right', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
color: '#ccaadd',
name: 'woman',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
},]
});
CSS
#left,
#right {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
디테일
두 개의 도표를 준비해서 방법을 강구하다.그중에 하나를 숨겨보도록 하겠습니다.br/>
legend(그림)를 누르면 해당 도표를 표시하거나 숨길 수 있습니다p>
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="cnt">
<div id="left"></div>
<div id="right"></div>
</div>
JS
var categories = [
'0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '
];
Highcharts.chart('left', {
chart: {
type: 'bar',
marginRight: 1
},
yAxis: {
min: 0,
reversed: true,
title: {
enabled: false
}
},
xAxis: {
visible: false,
reversed: false,
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 30,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
name: 'man',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
}]
});
Highcharts.chart('right', {
chart: {
type: 'bar'
},
yAxis: {
min: 0,
enabled: false,
title: {
enabled: false
}
},
xAxis: {
reversed: false,
categories: categories,
tickLength: 0
},
title: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 10,
floating: true,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
},
series: [{
color: '#ccaadd',
name: 'woman',
data: [
2.1, 2.0, 2.1, 2.3, 2.6,
2.9, 3.2, 3.1, 2.9, 3.4,
4.3, 4.0, 3.5, 2.9, 2.5,
2.7, 2.2, 1.1, 0.6, 0.2,
0.0
]
},]
});
CSS
#left,
#right {
width: 49%;
display: inline-block;
}
#cnt {
max-width: 800px;
margin: 0 auto;
}
두 개의 도표를 준비해서 방법을 강구하다.그중에 하나를 숨겨보도록 하겠습니다.br/>
legend(그림)를 누르면 해당 도표를 표시하거나 숨길 수 있습니다p>
총결산
강행.보수성도 안 좋아서 개인적으로 쓰고 싶지 않아요.br/>
그러나 대다수의 도표는 모두 실현할 수 있으니 반드시 한 번 사용하십시오p>
Reference
이 문제에 관하여(Highcharts로 인구 피라미드 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matamatanot/items/ffdeeb8bb47f6623ad53텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
