Choosing an attractive linear scale for a graph's Y Axis

后端 未结 13 1455
予麋鹿
予麋鹿 2020-12-07 08:42

I\'m writing a bit of code to display a bar (or line) graph in our software. Everything\'s going fine. The thing that\'s got me stumped is labeling the Y axis.

The

13条回答
  •  旧时难觅i
    2020-12-07 09:06

    For anyone who need this in ES5 Javascript, been wrestling a bit, but here it is:

    var min=52;
    var max=173;
    var actualHeight=500; // 500 pixels high graph
    
    var tickCount =Math.round(actualHeight/100); 
    // we want lines about every 100 pixels.
    
    if(tickCount <3) tickCount =3; 
    var range=Math.abs(max-min);
    var unroundedTickSize = range/(tickCount-1);
    var x = Math.ceil(Math.log10(unroundedTickSize)-1);
    var pow10x = Math.pow(10, x);
    var roundedTickRange = Math.ceil(unroundedTickSize / pow10x) * pow10x;
    var min_rounded=roundedTickRange * Math.floor(min/roundedTickRange);
    var max_rounded= roundedTickRange * Math.ceil(max/roundedTickRange);
    var nr=tickCount;
    var str="";
    for(var x=min_rounded;x<=max_rounded;x+=roundedTickRange)
    {
        str+=x+", ";
    }
    console.log("nice Y axis "+str);    
    

    Based on the excellent answer by Toon Krijtje.

提交回复
热议问题