Question

有没有人知道如何在FLOT中创建对数图表？

基本上我正在尝试创建一个类似于此处所示的图表（左上角）： http://leto.net/plot/examples/logarithms.html

但是，我尝试使用相同的选项，但它没有以相同的方式显示图表。我认为从那以后考虑到帖子已经很老了，FLOT肯定会有很多变化。

如果有人有任何想法，请告诉我。

感谢。

Answer 1

您可以使用yaxis上的“transform”选项执行此操作。

查看工作here。

$(function () {
    // setup plot
    function sampleFunction(x1, x2, func) {
        var d = [ ];
        var step = (x2-x1)/300;
        for (var i = x1; i < x2; i += step )
            d.push([i, func( i ) ]);

        return d;
    }

    var options1 = {
        lines: { show: true },
        xaxis: { ticks: 4 },
        yaxis: { ticks: [0.001,0.01,0.1,1,10,100],
                 transform: function(v) {return Math.log(v+0.0001); /*move away from zero*/},
                 tickDecimals: 3 },
        grid: { hoverable: true, clickable: true, color: "#999" }
    };

    var data1 = sampleFunction( 0, 5, function(x){ return Math.exp(x)*Math.sin(x)*Math.sin(x) } );

    var plot1 = $.plot($("#chart1"),  [ { label: "exp(x)sin(x)^2", data: data1 } ], options1);
});

完整工作守则：

$(function () {
    // setup plot
    function sampleFunction(x1, x2, func) {
        var d = [ ];
        var step = (x2-x1)/300;
        for (var i = x1; i < x2; i += step )
            d.push([i, func( i ) ]);

        return d;
    }
    
    var options1 = {
        lines: { show: true  },
        xaxis: { ticks: 4 },
        yaxis: { ticks: [0.001,0.01,0.1,1,10,100],
                 transform:  function(v) {return Math.log(v+0.0001); /*move away from zero*/} , tickDecimals: 3 },
        grid: { hoverable: true, clickable: true , color: "#999"}
    };
    
    var data1 = sampleFunction( 0, 5, function(x){ return Math.exp(x)*Math.sin(x)*Math.sin(x) } );
    
    var plot1 = $.plot($("#chart1"),  [ { label: "exp(x)sin(x)^2", data: data1} ], options1);
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<br/><br/>
<div id="chart1" style="width:600px;height:300px;"></div>

Answer 2

出色的工作Mark

由于对数图中Y轴的刻度是10的幂格式，

我想在Y轴刻度上共享增强，Here它是。

    $(function () {
    // setup plot
    function sampleFunction(x1, x2, func) {
        var d = [ ];
        var step = (x2-x1)/300;
        for (var i = x1; i < x2; i += step )
            d.push([i, func( i ) ]);

        return d;
    }

    var options1 = {
        lines: { show: true  },
        xaxis: { ticks: 4 },
        yaxis: { ticks: [0.001,0.01,0.1,1,10,100],
                 transform:  function(v) {return Math.log(v+0.0001); /*move away from zero*/} , tickDecimals: 3 ,
                 tickFormatter: function (v, axis) {return "10" + (Math.round( Math.log(v)/Math.LN10)).toString().sup();}
                },
        grid: { hoverable: true, clickable: true , color: "#999"}
    };

    var data1 = sampleFunction( 0, 5, function(x){ return Math.exp(x)*Math.sin(x)*Math.sin(x) } );

    var plot1 = $.plot($("#chart1"),  [ { label: "exp(x)sin(x)" + "2".sup(), data: data1} ], options1);
});

如果有更好的方法，请告诉我。

感谢。

Answer 3

正如另一位回答者所说，好的工作Mark。有一种方法可以使您的解决方案更加健壮。

Mark's答案适用于大多数情况，但对于接近或小于0.0001的值，情节看起来不正确。此外，您不需要修改每个值以远离零。我相信flot会尝试转换0以确定＆＃34; bottom＆＃34;情节应该是。因此，您将无法使绘图轴限制动态。如果您的值远大于0.0001，这将使您的情节看起来非常糟糕。因此，以下修改使Mark的解决方案更加健壮，但需要知道数据中的最小y值（ymin以下）。

var options1 = {
    lines: { show: true  },
    xaxis: { ticks: 4 },
    yaxis: { ticks: [0.001,0.01,0.1,1,10,100],
             transform:  Function("v","return v == 0 ? Math.log("+Math.pow(10,ymin)+") : Math.log(v);"), tickDecimals: 3 },
    grid: { hoverable: true, clickable: true , color: "#999"}
};

Answer 4

它是基础10.它应该不是的方法？

transform: function (v) {
    if (v == 0) v = 0.0001;
    return Math.log(v) / Math.log(10);
},
inverseTransform: function (v) {
    Math.pow(10, v);
},

FLOT中的对数图表

4 个答案: