Как показать символы по оси X на графике в jquery - PullRequest
Новая
       15

Как показать символы по оси X на графике в jquery

0 голосов
/ 09 мая 2018

Мне нужно использовать график обновления в plot.js для моего проекта, это мой код: 

var data = [],
    totalPoints = 1200,
    $UpdatingChartColors = $("#updating-chart").css('color');

function getRandomData() {
    if (data.length > 0)
        data = data.slice(1);
    while (data.length < totalPoints) {
        var prev = data.length > 0 ? data[data.length - 1] : 50;
        var y = prev + Math.random() * 10 - 5;
        if (y < 0)
            y = 0;
        if (y > 100)
            y = 100;
        data.push(y);
    }
    var res = [];
    for (var i = 0; i < data.length; ++i)
        res.push([i, data[i]])
    return res;
}
var updateInterval = 1500;
$("#updating-chart").val(updateInterval).change(function() {
    var v = $(this).val();
    if (v && !isNaN(+v)) {
        updateInterval = +v;
        $(this).val("" + updateInterval);
    }
});
var options = {
    yaxis: {
        min: 0,
        max: 100
    },
    xaxis: {
        transform: function(v) {
            return -v;
        },
        min: 0,
        max: 90
    },
    colors: [$UpdatingChartColors],
    series: {
        lines: {
            lineWidth: 1,
            fill: true,
            fillColor: {
                colors: [{
                    opacity: 0.4
                }, {
                    opacity: 0
                }]
            },
            steps: false
        }
    }
};

var plot = $.plot($("#updating-chart"), [getRandomData()], options);

Я получаю вывод по оси x, как 90, 80, 70, 60, 50, 40, 30, 20, 10, 0. Но мне нужны выходные данные, такие как D-90, D-80, D-70, D-60, D-50, D-40, D-30, D-20, D-10.

Как этого добиться?

1 Ответ

0 голосов
/ 09 мая 2018

Используйте свойство tickFormatter в параметрах xaxis: 

tickFormatter: function(val, axis) {
    return 'D-' + val;
}

См. здесь для рабочей скрипки и здесь для получения дополнительной информации.

PS: при использовании transform также следует указать inverseTransform.

...