Chart.js의 절반 도넛에 데이터 값을 표시하는 방법

반 도넛 차트에 데이터 값을 표시 할 수 있습니까? 사전Chart.js의 절반 도넛에 데이터 값을 표시하는 방법

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ["Red"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [50,100-50], 
      backgroundColor: [ 

       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 

       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     rotation: 1 * Math.PI, 
     circumference: 1 * Math.PI 
    } 
});

출처

2017-03-09 Harshit

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["Red"], 
 
     datasets: [{ 
 
      label: '# of Votes', 
 
      data: [50,100-50], 
 
      text: "ff", 
 
      backgroundColor: [ 
 
       
 
       'rgba(255, 159, 64, 0.2)' 
 
      ], 
 
      borderColor: [ 
 
       
 
       'rgba(255, 159, 64, 1)' 
 
      ], 
 
      borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     rotation: 1 * Math.PI, 
 
     circumference: 1 * Math.PI 
 
    } 
 
});

.test 
 
{ 
 
    position:absolute; 
 
    bottom:-20px; 
 
    left:calc(50% - 10px); 
 
    display:block; 
 
}

<body> 
 
<span class="test">test</span> 
 
    <canvas id="myChart" width="400" height="400"></canvas> 
 
    
 

 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 
 

 
</body>

의 도움을 https://jsfiddle.net/z638ttv0/16/이

감사합니다 : 배열 여기 에서 그 값을 취함으로써 차트의 하단에 텍스트로 데이터 값을 보여주고 싶은 것은 링크입니다

사용자 설정 값

출처

2017-03-09 08:22:59

thanx 답장을 보내고 싶지만 "data : [50]"대신 CSS를 통해 스타일링하기 – Harshit

Chart.js의 절반 도넛에 데이터 값을 표시하는 방법

답변

관련 문제