編輯

嘿對不起，我花了一段時間纔回到你身邊。這是你正在尋找的代碼嗎？

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Demo</title> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 

     var test = { 
      x_values: [0,10,20,30,40,50,60,70,80,90,100], 
      y_values: [0,10,20,30,40,50,60,70,80,90,100], 
      convert_values_to_log10: function (values) { 
       var i=0; 
       var converted_values = [] 
       for (i=0; i<values.length; i++) { 
        converted_values[i] = Math.log(values[i])/Math.LN10 
       } 
      return converted_values; 
      } 

     } 

     $(document).ready(function(){ 
      $('#x_vals').text(test.x_values.toString()); 
      $('#y_vals').text(test.y_values.toString()); 
      $('#y10_vals').text(test.convert_values_to_log10(test.y_values).toString()); 
     }); 

    </script> 

    </head> 
    <body> 

    <h2>x values = </h2> 
    <p id="x_vals"></p> 
    <h2>y values = </h2> 
    <p id="y_vals"></p> 
    <h2>log10 y values = </h2> 
    <p id="y10_vals"></p> 

    </body> 
</html>

來源

2011-08-20 18:04:04 AJP

嗨，它在HTML 5（javascript）中，Arithemtic的意思是固定的，例如：10到20之間的距離是相同的20，另一方面，在圖30的情況下，10至20之間的距離與20至40（雙）相同， – Akash

您可以使用Morris.js繪製圖表。

然後你可以擴展莫里斯和修改transY函數來完成對數刻度是這樣的：

(function() { 
    var $, MyMorris; 

    MyMorris = window.CbyMorris = {}; 
    $ = jQuery; 

    MyMorris = Object.create(Morris); 

    MyMorris.Grid.prototype.gridDefaults["yLogScale"] = false; 

    MyMorris.Grid.prototype.transY = function (y) { 
     if (!this.options.horizontal) { 
      if (this.options.yLogScale) { 
       return this.bottom - (this.height * Math.log((y + 1) - this.ymin)/Math.log(this.ymax/(this.ymin + 1))); 
      } else { 
       return this.bottom - (y - this.ymin) * this.dy; 
      } 
     } else { 
      return this.left + (y - this.ymin) * this.dy; 
     } 
    }; 
}).call(this);

然後設置yLogScale參數設置爲true在莫里斯的配置：

yLogScale: true

請參閱我的完整答案來查看結果：https://stackoverflow.com/a/39878478/1351076

來源

2016-10-05 15:54:00 krlzlx

用對數Y軸創建圖表

回答

編輯

相關問題