하이 차트를 사용하여 여러 원형 차트를 표시하는 방법
하리시 코 무리
높은 차트를 사용하여 여러 개의 원형 차트를 표시하는 문제에 갇혀 있습니다.
내가 성취해야 할 것은
하이 차트를 사용하여 세 개의 분리 된 원형 차트를 만들고 내 사용자 지정 CSS를 사용하여 중첩했습니다.
모든 차트를 div에 넣고 다음과 같이 CSS를 작성합니다.
#homepage-charts {
position: relative;
}
#inner-chart, #center-chart, #outer-chart {
position: absolute;
top: 0;
left: 0;
div svg rect {
fill: none !important;
}
}
#inner-chart {
z-index: 4;
}
#center-chart {
z-index: 3;
}
#outer-chart {
z-index: 2;
}
마지막으로,
문제는 위와 같이 만들 때 첫 번째 차트 아래에있는 차트를 클릭하거나 가리킬 수 없다는 것입니다.
클릭을 트리거하거나 첫 번째 차트 뒤에있는 차트를 가리킬 방법이 있습니까?
또는 위와 같이 표시 할 수없는 높은 차트 기능이 있습니까?
프레드릭 룬딘
highcharts 개체의 계열 배열에 여러 차트를 차례로 추가하여 원형 차트를 쌓을 수 있습니다. 같은 위치에 추가하기 만하면되지만 다른 레벨에 맞게 크기를 조정하면됩니다. 바이올린 벨로우를 참조하십시오.
Highcharts.chart('container', {
title: {
text: 'Stacked pie charts'
},
xAxis: {},
labels: {},
series: [{
type: 'pie',
name: 'Level 1',
data: [{
name: '1.1',
y: 1.1,
color: Highcharts.getOptions().colors[6]
}, {
name: '1.2',
y: 1.2,
color: Highcharts.getOptions().colors[7]
}, {
name: '1.3',
y: 1.3,
color: Highcharts.getOptions().colors[8]
}],
center: [200, 200],
size: 300,
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
type: 'pie',
name: 'Level 2',
data: [{
name: '2.1',
y: 2.1,
color: Highcharts.getOptions().colors[0]
}, {
name: '2.2',
y: 2.2,
color: Highcharts.getOptions().colors[1]
}, {
name: '2.3',
y: 2.3,
color: Highcharts.getOptions().colors[2]
}],
center: [200, 200],
size: 200,
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
type: 'pie',
name: 'Level 3',
data: [{
name: '3.1',
y: 3.1,
color: Highcharts.getOptions().colors[3]
}, {
name: '3.2',
y: 3.2,
color: Highcharts.getOptions().colors[4]
}, {
name: '3.3',
y: 3.3,
color: Highcharts.getOptions().colors[5]
}],
center: [200, 200],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
amcharts를 사용하여 원형 차트 조각에 손 모양 커서를 표시하는 방법
- 2
Highchart를 사용하여 여러 원형 차트의 json
- 3
D3를 사용하여 SVG 원형 차트 생성 텍스트를 세로로 정렬하는 방법
- 4
chart.js를 사용하여 mysql의 데이터를 원형 차트로 표시하는 방법은 무엇입니까?
- 5
gganimate를 사용하여 부분적이 아닌 완전한 원형 차트를 얻는 방법
- 6
자바 스크립트를 사용하여 Zul에서 원형 차트를 그리는 방법
- 7
chart.js를 사용하여 원형 차트의 슬라이스 내부에 슬라이스 값을 표시하는 방법
- 8
Hightchart-ng를 사용하여 Highcharts 반원형 도넛 형 차트를 만드는 방법
- 9
MVC4를 사용하여 JqPlot 차트 날짜를 표시하는 방법
- 10
d3.js를 사용하여 원형 전환 차트에 레이블을 표시하는 방법은 무엇입니까?
- 11
Highchart를 사용하여 PHP를 원형 차트의 JSON에 적합한 문자열로 포맷하는 방법
- 12
jfree 차트에서 여러 데이터 시리즈를 표시하는 방법
- 13
ggplot을 사용하여 r에서 변형 원형 막대 차트를 그리는 방법
- 14
차트 (IOS)를 사용하여 X 축에 매달 표시하는 방법
- 15
VBA를 사용하여 차트 축 제목을 표시하는 방법
- 16
amcharts를 사용하여 다중 링 도넛 원형 차트를 만드는 방법은 무엇입니까?
- 17
Android에서 achartengine을 사용하여 원형 차트에 백분율을 표시하는 방법
- 18
NVD3를 사용하여 거품 형 차트를 만드는 방법
- 19
d3.js를 사용하여 원형 차트 만들기?
- 20
d3.js를 사용하여 원형 차트 만들기?
- 21
Pandas를 사용하여 여러 중첩 차원이있는 스프레드 시트를 "피벗 해제"하는 방법은 무엇입니까?
- 22
python pandas를 사용하여 여러 줄 차트를 그리는 방법?
- 23
jfreechart를 사용하여 차트 유형을 확인하는 방법
- 24
DateTime을 사용하여 +/- 차이를 표시하는 방법
- 25
pykcharts 라이브러리를 사용하여 원형 차트의 색상을 변경하는 방법은 무엇입니까?
- 26
dc.js를 사용하여 행 차트의 하단 데이터를 표시하는 방법
- 27
R을 사용하여 많은 행 (또는 차원)이있는 방사형 차트를 그리는 방법은 무엇입니까?
- 28
highchart를 사용하여 원형 차트 조각을 클릭하면 버튼 클릭 이벤트를 호출하는 방법
- 29
하이 차트를 사용하여 연속 표시 값을 변경하는 방법이 있습니까?
몇 마디 만하겠습니다