Question

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

我将从数据库中获取所有值（其中datetime以2015-04-30 10:27:58格式存储并通过webmethod传递。

如果我将var data1创建为

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

它无效。所以我猜我在创建var data1时需要转换'2015-04-30 10:27:58'毫秒刻度。

但我不想在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 line graph中的x轴上显示时间？

1 个答案: