Fatal编程技术网
  • javascript/
  • Javascript 创建具有对数轴的图表

Javascript 创建具有对数轴的图表

javascript html charts logging

Javascript 创建具有对数轴的图表,javascript,html,charts,logging,logarithm,Javascript,Html,Charts,Logging,Logarithm,我在Y轴上使用算术（恒定比例）创建了各种图表。现在我想创建一个具有对数轴的 1和2之间的距离应与2和4之间的距离相同 关于缩放方法有什么想法吗 谢谢。算术是指特定的程序或插件吗？否则，如果你只是说你有一个x和y值的列表，那么把y值通过一个log函数，并绘制它。你用什么语言编程 编辑 抱歉，我花了点时间才找到你。这就是你要找的代码吗 <!doctype html> <html> <head> <meta charset="utf-8&

我在Y轴上使用算术（恒定比例）创建了各种图表。现在我想创建一个具有对数轴的

1和2之间的距离应与2和4之间的距离相同

关于缩放方法有什么想法吗

谢谢。

算术是指特定的程序或插件吗？否则，如果你只是说你有一个x和y值的列表，那么把y值通过一个log函数，并绘制它。你用什么语言编程

编辑 抱歉，我花了点时间才找到你。这就是你要找的代码吗

<!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>


演示
var测试={
x_值：[0,10,20,30,40,50,60,70,80,90100]，
y_值：[0,10,20,30,40,50,60,70,80,90100]，
将_值_转换为_log10：函数（值）{
var i=0；
var转换的_值=[]
对于（i=0；i，您可以使用绘制图表

然后，您可以扩展Morris并修改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);


然后在Morris配置中将
yLogScale
参数设置为true：


yLogScale: true


请参阅我的完整答案以查看结果：
Hi，它在HTML 5（javascript）中，算术的意思是固定的，例如：10到20之间的距离是相同的20，30，另一方面，在对数图表中，10到20之间的距离是相同的20到40（双倍）