[英]Automatically convert absolute numbers into to percent values in echarts
I am trying to have a chart with percent values instead of the numeric values I'm feeding to it. 我正在尝试使用百分比值而不是数值的图表。
Is there an option to automatically convert the numbers in the bar chart to percentages? 是否可以将条形图中的数字自动转换为百分比? (In the example, there is a range from 0 to 50,000, and I want that to be converted from 0% to 100%). (在示例中,范围是0到50,000,我希望将其从0%转换为100%)。
You can have y axis in percentage 0,10,20 .... 100% You must have total num , in this case total = 50000; y轴的百分比可以为0,10,20...。100%必须有num总数,在这种情况下total = 50000;
Now get the data and calculate % as = data/total * 100 and plot it on graph. 现在获取数据并计算%=数据/总计* 100并将其绘制在图形上。 I hope it helps. 希望对您有所帮助。
Percentage is (100/maxValue) * value
. 百分比为(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.