Логарифмическая диаграмма в FLOT

Question

Кто-нибудь знает, как создать логарифмическую диаграмму в FLOT?

В основном я пытаюсь создать диаграмму, которая выглядит так, как показано здесь (вверху слева): http://leto.net/plot/examples/logarithms.html

Тем не менее, я попробовал использовать те же параметры, но график не отображается так же. Я думаю, что с тех пор должно было быть много изменений во FLOT, учитывая, что пост довольно старый.

Если у кого-нибудь есть идеи, пожалуйста, дайте мне знать.

Спасибо.

Answer 1

Вы можете сделать это, используя опцию "transform" на yaxis.

См. Работу здесь .

$(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, Здесь это.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

Как сказал другой ответчик, хорошая работа Марк . Есть способ сделать ваше решение более надежным.

Ответ Марка будет работать в большинстве случаев, но график не будет выглядеть правильно для значений, близких или меньших 0,0001. Кроме того, вам не нужно изменять каждое значение, чтобы отойти от нуля. Я считаю, что flot пытается преобразовать 0, чтобы определить, где должно быть «дно» графика. Из-за этого вы не сможете сделать границы осей вашего графика динамическими. Это сделает ваши графики очень плохими, если ваши значения намного больше, чем 0,0001. Поэтому следующая модификация делает решение Марка более надежным, но требует знания минимального значения 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);
},