FLOT中的对数图 [英] Logarithmic chart in FLOT

问题描述

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

基本上我想创建一个图表， ）：
http://leto.net/plot/examples/logarithms.html

但是，我已经尝试使用相同的选项，但它不会以相同的方式显示图表。我认为从那时起，FLOT应该有很多变化，因为考虑到这个职位已经很老了。

如果有人有任何想法，请让我知道。 / p>

感谢。

解决方案

选项。

查看工作这里。

  $（function（）{
 // setup plot 
 function sampleFunction（x1，x2 ，func）{
 var d = []; 
 var step =（x2-x1）/ 300; 
 for（var i = x1; i  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 ）{return Math.log（v + 0.0001）; / *远离零* /}，
 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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =http://people.iola.dk /olau/flot/jquery.flot.js\"></script><br/> ;<br/> ;<div id =chart1style =width：600px; height：300px; >< / div>  

Does anyone have any idea how to create a logarithmic chart in FLOT?

Basically I am trying to create a chart that looks like the one shown here (top left): http://leto.net/plot/examples/logarithms.html

However, I have given it a try using the same options but it doesn't show the chart the same way. I think there must have been a lot of changes to FLOT since then considering that the post is quite old.

If anyone has any idea, please do let me know.

Thanks.

解决方案

You can do this using the "transform" option on the yaxis.

See work 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 Working Code:

$(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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<br/><br/>
<div id="chart1" style="width:600px;height:300px;"></div>

这篇关于FLOT中的对数图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！