如何在 flot 折线图中的 x 轴上显示时间？

Question

我正在尝试显示特定时间范围内最小值和最大值之间的时间间隔。例如：2015-04-30 10:20:00 和 2015-04-30 10:30:00 在 x 轴上

我将从数据库中获取所有值（日期时间以 2015-04-30 10:27:58 格式存储并通过 web 方法传递。

如果我将 var data1 创建为

var data1 = [
    ['2015-04-30 10:27:58', 1690.25], ...
];

不行。所以我猜我需要在创建 var data1.

时转换 '2015-04-30 10:27:58'milisecond ticks

但我不想在 x 轴上以 10:27:58 而不是 1430369878000 等适当的时间格式显示时间。（我想排除日期部分）。

我怎样才能做到这一点？

  //RED
        var data1 = [
    [1430369878000, 1690.25], [1430369879000, 1696.3], [1430369880000, 1659.65]
];

        //BLUE
        var data2 = [
    [1430369878000, 1682.1], [1430369879000, 1680.65], [1430369880000, 1685.1]
];

    var dataset = [
{
    label: "Sell out",
    data: data1,
    color: "#FF0000",
    points: { fillColor: "#FF0000", show: true },
    lines: { show: true }
},
{
    label: "Buy in",
    data: data2,
    color: "#0062E3",
    points: { fillColor: "#0062E3", show: true },
    lines: { show: true }
}
];


    var options = {
        series: {
            shadowSize: 5
        },
        xaxes: { mode: "time",
            min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
            max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
            timeformat: "%H/%M/%S"
        },
        yaxis: {
            color: "black",
            tickDecimals: 2,
            axisLabel: "Gold Price  in USD/oz",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
        },
        legend: {
            noColumns: 0,
            labelFormatter: function (label, series) {
                return "<font color=\"white\">" + label + "</font>";
            },
            backgroundColor: "#000",
            backgroundOpacity: 0.9,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            hoverable: true,
            borderWidth: 3,
            mouseActiveRadius: 50,
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
            axisMargin: 20
        }
    };

    $(document).ready(function () {

        setInterval(function () {
            $.plot($("#flot-placeholder"), dataset, options);
            $("#flot-placeholder").UseTooltip();
        }, 1000)
    });


    var previousPoint = null, previousLabel = null;

    $.fn.UseTooltip = function () {
        $(this).bind("plothover", function (event, pos, item) {
            if (item) {
                if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                    previousPoint = item.dataIndex;
                    previousLabel = item.series.label;
                    $("#tooltip").remove();

                    var x = item.datapoint[0];
                    var y = item.datapoint[1];

                    var date = new Date(x);
                    var color = item.series.color;

                    showTooltip(item.pageX, item.pageY, color,
                        "<strong>" + item.series.label + "</strong><br>" +
                       x +
                        " : <strong>" + y + "</strong> (USD/oz)");
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    };

    function showTooltip(x, y, color, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            border: '2px solid ' + color,
            padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }

Answer 1

x 轴的选项名称为 xaxes 而不是 xaxis，因此未使用它们。（您的最小值和最大值也超出了数据范围。）

    // not xaxes:
    xaxis: {
        mode: "time",
        //min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
        //max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
        timeformat: "%H/%M/%S"
    },

请参阅此 fiddle 以获取工作示例。

PS：您将 $.plot() 函数与 setInterval 一起使用，这没问题，但您应该只调用一次 UseTooltip()。

如何在 flot 折线图中的 x 轴上显示时间？

How to display time on x axis in flot line graph?

javascript

jquery

asp.net

graph

flot