FLOT 中的对数图表

Question

有谁知道如何在 FLOT 中创建对数图表吗？

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

但是，我有尝试使用相同的选项，但它没有以相同的方式显示图表。考虑到这篇文章已经很老了，我认为从那时起 FLOT 一定发生了很多变化。

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

谢谢。

Answer 1

您可以使用 y 轴上的“变换”选项来完成此操作。

请参阅此处的作品。

$(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

伟大的工作 标记

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

我想分享Y 轴刻度增强，这里。

    $(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 的答案适用于大多数情况，但对于接近或小于 0.0001 的值，该图看起来不正确。此外，您无需修改​​每个值即可远离零。我相信 flot 试图转换 0 来确定绘图的“底部”应该在哪里。因此，您将无法使绘图轴限制动态化。如果您的值远大于 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);
},