Biểu đồ lôgarít trong FLOT

Question

Có ai có ý tưởng nào về cách tạo biểu đồ lôgarít trong FLOT không?

Về cơ bản tôi đang cố gắng để tạo ra một biểu đồ mà trông giống như một đưa ra ở đây (trên cùng bên trái): http://leto.net/plot/examples/logarithms.html

Tuy nhiên, tôi đã cho nó một thử bằng cách sử dụng tùy chọn tương tự nhưng nó không hiển thị biểu đồ theo cùng một cách. Tôi nghĩ rằng phải có rất nhiều thay đổi để FLOT kể từ đó xem xét rằng bài viết là khá cũ.

Nếu có ai có ý tưởng, vui lòng cho tôi biết.

Cảm ơn.

Answer 1

Bạn có thể thực hiện việc này bằng tùy chọn "chuyển đổi" trên yaxis.

Xem công việc 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); 
}); 

---

Full Mã làm việc:

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

Great work Mark

Khi ve của trục Y trong đồ thị Logarithmic có định dạng của sức mạnh của 10,

Tôi muốn chia sẻ nâng cao trong trục Y ve, Here nó 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); 
}); 

Xin vui lòng cho tôi biết nếu có bất kỳ cách tốt hơn.

Cảm ơn.

Answer 3

Khi người trả lời khác cho biết, hãy làm việc tốt Mark. Có một cách để làm cho giải pháp của bạn mạnh mẽ hơn.

Mark's câu trả lời sẽ hoạt động đối với hầu hết các trường hợp, nhưng cốt truyện sẽ không phù hợp với các giá trị gần hoặc nhỏ hơn 0,0001. Ngoài ra, bạn không cần sửa đổi mọi giá trị để di chuyển khỏi số không. Tôi tin rằng flot cố gắng để biến đổi 0 để xác định nơi "đáy" của cốt truyện nên được. Bởi vì điều này, bạn sẽ không thể làm cho giới hạn trục cốt truyện của bạn năng động. Điều này sẽ làm cho các ô của bạn trông rất tệ nếu giá trị của bạn lớn hơn 0.0001. Do đó, sửa đổi sau làm cho giải pháp của Mark mạnh mẽ hơn, nhưng nó đòi hỏi phải biết giá trị y tối thiểu (ymin dưới đây) trong dữ liệu của bạn.

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

Đây là cơ sở 10. Phương pháp này không nên?

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