Highcharts 라이브러리를 사용하여 가장 간단한 도넛 형 차트를 생성하는 솔루션을 찾고있었습니다. 그러나 Highcharts의 모든 예에는 내부 파이와 외부 도넛이 모두 포함 된 차트 스타일이 표시됩니다 ( http : //www.highcharts.com/demo/pie-donut )
다른 라이브러리와 마찬가지로 내부 파이를 제거하고 외부 도넛을 유지하는 방법은 무엇입니까? (RGraph와 같은 것 : http://www.rgraph.net/examples/donut.html)
감사합니다.
-
답변 # 1
-
답변 # 2
**I hope this example of highchat will solve your problum http://jsfiddle.net/e2qpa/3/ $(function() { var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' }, plotOptions: { pie: { borderColor: '#000000', innerSize: '60%' } }, series: [{ data: [ ['Firefox', 44.2], ['IE7', 26.6], ['IE6', 20], ['Chrome', 3.1], ['Other', 5.4] ]}] }, // using function(chart) { // on complete var xpos = '50%'; var ypos = '53%'; var circleradius = 102; // Render the circle chart.renderer.circle(xpos, ypos, circleradius).attr({ fill: '#ddd', }).add(); // Render the text chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({ width: circleradius*2, color: '#4572A7', fontSize: '16px', textAlign: 'center' }).attr({ // why doesn't zIndex get the text in front of the chart? zIndex: 999 }).add(); }); });
-
답변 # 3
이것은 최고의 검색 결과였으며 주어진 답변이 저에게 효과가 없었습니다. 단순한 배열 배열보다 데이터 점에 대한 더 많은 제어가 필요했습니다. 특정 데이터에 대한 명시적인 색상과 같은 추가 옵션을 구성하려면 JSON 객체를 사용해야했습니다. 일부 연구를 통해 데이터 형식을 전혀 수정할 필요가 없다는 것을 알았습니다. 원형 차트를 도넛 형 차트로 만들려면 데이터 계열에서 innerSize 값을 0보다 크게 설정하기 만하면됩니다.
하이 차트 문서에서 :
와이즈 비즈다음과 같은 데이터로 간단한 도넛 형 차트를 얻을 수 있습니다 :
innerSize: The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the pie size. Pixel values are given as integers.
JS 피들
series: [{ innerSize: '30%', data: [ {name: 'Yellow Slice', y: 12, color: 'yellow'}, {name: 'Red Slice', y: 10, color: 'red' }, {name: 'Blue Slice', y: 33, color: 'blue'}, {name: 'Green Slice', y: 20, color: 'green'} ] }]
관련 자료
- javascript - 내부 부분을 제거하지 않고 문자열 교체
- Apexcharts가있는 하프 도넛 형 차트
- r - 데이터의 배율을 조정하지 않고 막대가 나란히있는 2y 축 차트를 그리는 방법
- typescript - 부트 스트랩 모달의 높은 차트에서 동일한 차트를 확장하는 방법 각도 6의 축소판 차트를 클릭하십시오
- javascript - 모듈을로드 할 때 highcharts 조직도에서 오류가 발생 함
- javascript - 서버를 사용하지 않고 차트를 만들기 위해 로컬 디렉토리에서 CSV 파일 가져 오기
- javascript - xAxis 및 마지막 데이터 포인트 레이블과 관련된 Highcharts AreaRange 차트 문제
- c++ - 명시 적으로 인스턴스를 전달하지 않고 내부 클래스에서 외부 클래스에 액세스
- javascript - Highchart의 원형 차트 xls 파일 범주 열 이름 변경
- mysql - 외래 키가있는 MariaDB INNER JOIN은 외래 키가없는 것보다 훨씬 느립니다
두 요소 (키/값) 배열의 배열로 데이터를 제공하면됩니다.
innerSize
를 지정하십시오 도넛 스타일을 얻을 수 있습니다.매개 변수에는 다음과 같은 내용이 포함됩니다 :
다음은 완전한 예제의 jsFiddle입니다.