在 dygraph y 轴上绘制时间？

Question

是否可以在 Dygraph 的 y 轴上创建 Time 格式？

-> 格式#s、#m、#h。
该图表需要以整个数字和 而不是 的形式显示，例如 2.5h。

我认为这可以通过 dygraph ticker 选项来完成，尽管我不完全确定从哪里开始，因为 dygraph 似乎总是喜欢拆分其粒度在某些值（时间应该分开 60s 然后在 60m）。

有人可以指出我编写自己的 Dygraph ticker 的正确方向吗？

Answer 1

我假设您的 y 值类似于秒数？您可以为 y 轴编写一个 axisLabelFormatter 以将秒数转换为“1h”或“30m”之类的字符串。

默认的 y 轴自动收报机为整数选择合适的值，例如100、200、300，这些对于持续时间来说不一定是好的值。如您所说，要做到这一点，您需要编写自己的自动收报机。

这并不像听起来那么难。关于代码的最佳文档是 here. The numericTicks 代码是最简单的示例。

Answer 2

所以我终于抽出时间来写答案了！

我找到的最简单的解决方案是将数量（以秒为单位）转换为分钟数或小时数，然后将其分成 nice 间隔。

我发现当它是双倍时更改为更高的值看起来最好 -> 所以只有当时间大于 2 分钟时，秒才更改为分钟。

代码看起来是这样的：

function dygraphTimeTicker(min, max, pixels, opts, dygraph, vals) {
    //Bigger the physical size of the graph - the more ticks we want
    var stepsAim = Math.ceil(pixels / 50);

    var storemax = Number(max);
    var storemin = Number(min);
    var timeRatio, valueSuffix;

    //Display the ticks as seconds, minutes or hours?
    if (storemax <= 120) { // (seconds) max <= 2 Minutes
        valueSuffix = "s";
        timeRatio = 1;
    } else if (storemax <= 7200) { // (minutes) max <= 2 Hours
        valueSuffix = "m";
        timeRatio = 60;
    } else { // (hours)
        valueSuffix = "h";
        timeRatio = 3600;
    }

    var tempmax = storemax + (timeRatio - (storemax % timeRatio));
    var maxTime = tempmax / timeRatio;

    //give us an array of our 'nice' values
    var labelSteps = gaugeSteps(maxTime, stepsAim);

    var labelArray = [];
    for (var j = 0; j < labelSteps.length; j++) {
        labelArray.push({
            v: labelSteps[j] * timeRatio,
            label: labelSteps[j] + valueSuffix
        });
    }

    return labelArray;
}

dygraphTimeTicker 也实现了这些功能：

//Give us a nice even numbers for our ticks
function calculateEvenStepSize(range, targetSteps) {
    // calculate an initial guess at step size
    var tempStep = range / targetSteps;

    // get the magnitude of the step size
    var mag = Math.floor(Math.log(tempStep) / Math.log(10));
    var magPow = Math.pow(10, mag);

    // calculate most significant digit of the new step size
    var magMsd = Math.round(tempStep / magPow + 0.5);

    // promote the MSD to either 1, 2, or 5
    if (magMsd > 5)
        magMsd = 10;
    else if (magMsd > 2)
        magMsd = 5;
    else if (magMsd > 1)
        magMsd = 2;

    return magMsd * magPow;
};

//Give us the array of values we want displayed as 'major ticks'
function gaugeSteps(max, step) {
    var steps = step || 10;
    var ticks = [];

    //if below steps then we don't want any decimals!
    if (max < steps) {
        for (var i = 0; i <= max; i++) {
            ticks.push(i);
        }
    } else {
        var tickSize = calculateEvenStepSize(max, steps);
        var loopAmount = Math.ceil(max / tickSize);

        for (i = 0; i < loopAmount + 1; i++) {
            ticks.push(i * tickSize);
        }
    }

    return ticks;
}

正在初始化：

new Dygraph(document.getElementById("graph"), data, {
    series: { 'Values': { axis: 'y1' } },
    ylabel: "Time",
    graphType: "Date",
    axes: {
        y: {
            ticker: dygraphTimeTicker,
            includeZero: true,
            valueFormatter: function(val, opts, lineName) {
                //This here is your own formatter
                return ValueToTime(val);
            }
        }
    }
});

我希望这对其他人有帮助。

在 dygraph y 轴上绘制时间？

plotting on a dygraph y-axis as time?

jquery

dygraphs

ticker