숫자를 그래픽에 넣으십시오.

Question

어떻게 도넛 그래픽에 숫자를 입력 할 수 있습니까?

각 요소의 백분율을 표시해야합니다. 이제 JS 차트를 보았습니다. 할 수 있을까요?

나는 차트 객체에 입력 한 데이터, 당신은 백분율로 될 수있는 데이터 배열을 수정할 수 있습니다 때 이러한

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: [ 
 
     "Red", 
 
     "Blue", 
 
     "Yellow" 
 
    ], 
 
    datasets: [ 
 
     { 
 
      data: [300, 50, 100], 
 
      backgroundColor: [ 
 
       "#FF6384", 
 
       "#36A2EB", 
 
       "#FFCE56" 
 
      ], 
 
      hoverBackgroundColor: [ 
 
       "#FF6384", 
 
       "#36A2EB", 
 
       "#FFCE56" 
 
      ] 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero:true 
 
       } 
 
      }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="400" height="200"></canvas>

Answer 1

처럼 보여 드리고자합니다. 예를 들어 :

original_data=[300, 50, 100]; 
var data=[]; 
var total=300+50+100 //You can also calculate the total sum with another for loop... 
for(var i = 0; i < original_data.length;i++){ 
    data[i]=original_data[i]/total*100; 
} 

나는 그것이 가장 아름다운 대답은 아니라고 알고 있지만 ...

작동