怎么让任意区间的数据,根据上下限值生成符合日常习惯的刻度值?

Question

怎么让任意区间的数据,根据上下限值生成符合日常习惯的刻度值?

发布于
2015-12-13

更新于
2015-12-13

如果用均分计算出来,这样的刻度值会带小数,而且不符合日常习惯
比如

 
  
      <html lang="en-US">  
      <head>
                
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <style>
      
      input {
       width:250px;height:50px;
       font-size:24px;;
      }
      </style>
        </head>
        <body>
    <canvas id=c width=600 height=400px style="border:1px solid grey"></canvas>  
     <form name='f' >
下限:    <input name='min' onblur='draw()' value="-394"/>
上限:    <input name='max' onblur='draw()' value="9349"/>
    
    </form>
    <script>  
function rand(min, max) {
    var range = max - min + 1;
    return Math.floor(Math.random() * range + min);
}


var myCanvas = document.getElementById("c");
var c = myCanvas.getContext("2d");



var w = 600;
var h = 400;

function draw() {

    c.clearRect(0, 0, w, h);


    var max = parseInt(document.f.max.value);
    var min = parseInt(document.f.min.value);
     
    var ratio = (max - min) / w;

    var tickSize = 50;

    var tickCnt = Math.ceil(w / tickSize);

    var unit = tickSize * ratio;


    c.moveTo(0, h - 30);
    c.lineTo(w, h - 30);
 
 
    for (var i = 0; i < tickCnt; i++) {
        c.moveTo(0 + tickSize * i, h - 30);
        c.lineTo(0 + tickSize * i, h - 20);
        c.textAlign = 'center';
        c.fillText((min + unit * i).toFixed(2), 0 + tickSize * i, h - 10);
         
    }
    c.stroke();
}
 
    </script>  
    </html>

图片描述
怎么样根据数据范围自动生成符合日常习惯的刻度值
比如范围是 -324到 7219
刻度是类似 -1000,0,1000,2000,3000,4000,5000,6000,7000,8000,9000,10000 这种的

canvas

阅读 3.3k

1 个回答

得票最新

murmur

2.2k41622

发布于
2015-12-13

你这个想法不现实这个也实在太均分了也太智能了
给你个参考首先把所有的数字全移动到正值
比如-394到7349 就是0到9000 然后取对数
我假设是10-100000就是10^1 到10^5
然后把1-5均分按对数画图这个是比较现实可行的没你那么智能的。。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进