FLOT中的對數圖表

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它is.s

$(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以確定劇情的「底部」應該在哪裏。因此，您將無法使您的繪圖軸限制動態化。如果你的值比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); 
},