echarts에서 자동으로 절대 값을 백분율 값으로 변환합니다.

Question

나는 먹이를주고있는 숫자 값 대신에 백분율 값을 가진 차트를 가지려고합니다.

이 내 차트 :

자동으로 비율을 막대 차트에서 숫자를 변환 할 수있는 옵션이 있습니까? (이 예제에서는 0부터 50,000까지의 범위가 있으며 0 %에서 100 %로 변환되기를 원합니다).

Answer 1

백분율로 y 축을 가질 수 있습니다. 0,10,20 .... 100 % 총계가 있어야합니다 (이 경우 total = 50000;

이제 데이터를 가져 와서 % as = data/total * 100 을 계산하고 그래프로 그립니다. 나는 그것이 도움이되기를 바랍니다.

Answer 2

백분율은 (100/maxValue) * value입니다.

var max = document.getElementById("max"); 
 
var offset = document.getElementById("offset"); 
 
var output = document.getElementById("output"); 
 
var c = document.getElementById("c").getContext("2d"); 
 

 

 
function getPercentage() { 
 
    var all = parseInt(max.value); 
 
    var off = parseInt(offset.value); 
 
    output.innerHTML = ((100/all) * off) + "%"; 
 

 
    c.fillStyle="#eee"; 
 
    c.fillRect(0, 0, c.canvas.width, c.canvas.height); 
 
    c.fillStyle="red"; 
 
    c.fillRect(25, c.canvas.height, 50, 0 - ((1/all) * off) * c.canvas.height) 
 
} 
 

 
max.onchange = getPercentage; 
 
max.onkeyup = getPercentage; 
 
offset.onchange = getPercentage; 
 
offset.onkeyup = getPercentage; 
 

 
getPercentage()

<label>Max: <input type="number" value="100" id="max"/></label><br> 
 
<label>Offset: <input type="number" value="90" id="offset"/></label> 
 
<p id="output"></p> 
 
<canvas id="c" width="100" height="100"></canvas>