-3

flot プラグインを使用して重量チャートを作成しました。

$(document).ready(function () {
var data1 = [
    [gd(2012, 0, 1), 67],
    [gd(2012, 1, 1), 68],
    [gd(2012, 2, 1), 75],
    [gd(2012, 3, 1), 69]
];

var data2 = [
    [gd(2012, 0, 1), 60],
    [gd(2012, 1, 1), 60],
    [gd(2012, 2, 1), 60],
    [gd(2012, 3, 1), 60]
];
var dataset = [{
    label: "weight",
    data: data1
}, {
    label: "Goal weight",
    data: data2
}];

var options = {
    series: {
        lines: {
            show: true
        },
        points: {
            radius: 3,
            fill: true,
            show: true
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [5, "day"],
        tickLength: 0,
        axisLabel: "2013",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },
    yaxes: [{
        axisLabel: "",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3,
        tickFormatter: function (v, axis) {
            return $.formatNumber(v, {
                format: "#,###",
                locale: "us"
            });
        }
    }],
    legend: {
        noColumns: 0,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 2,
        borderColor: "#633200",
        backgroundColor: {
            colors: ["#ffffff", "#EDF5FF"]
        }
    },
    colors: ["#FFA100", "#B7C84B"]
};

$(document).ready(function () {
    $.plot($("#flot-placeholder1"), dataset, options);
    $("#flot-placeholder1").UseTooltip();
});

function gd(year, month, day) {
    return new Date(year, month, day).getTime();
}

var previousPoint = null,
    previousLabel = null;
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];


$.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 color = item.series.color;
                var month = new Date(x).getDay();

                //console.log(item);

                if (item.seriesIndex == 0) {
                    showTooltip(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)");
                } else {
                    showTooltip(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)");
                }
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 120,
        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);
}

});

私が正確に必要なもの：

1- ajax.json などの別のファイルにデータを配置します。

var data1 = [
[gd(2012, 0, 1), 67],
[gd(2012, 1, 1), 68],
[gd(2012, 2, 1), 75],
[gd(2012, 3, 1), 69]
];

var data2 = [
[gd(2012, 0, 1), 60],
[gd(2012, 1, 1), 60],
[gd(2012, 2, 1), 60],
[gd(2012, 3, 1), 60]
];

データベースから値を取得しますが、関数 gd() の使用方法がわからないためです。

function gd(year, month, day) {
    return new Date(year, month, day).getTime();
}

2-2番目の問題は、チャートを更新してデータを更新したいということです。試してみましたが、エラーが発生してチャートが消えるたびに、クリック機能でajaxを使用することを考えています:

$("button.dataUpdate").click(function () {

....

function onDataReceived() {

    $.plot("#flot-placeholder1", data, options);
}

$.ajax({
    url: "ajax.json",
    type: "GET",
    dataType: "json",
    success: onDataReceived
});

「dataupdate」ボタンをクリックしてajaxを実行しようとした後、ajax.jsonページからデータを取得し、最終的にチャートを更新して更新しましたか?何か考えはありますか?

備考:最後のコードを最初のコードに正しく統合してすべての作業を行うための解決策を見つけるために2日を費やしてください。コメントだけでなく、コードを使用した直接的な解決策を願っています...

4

2 に答える 2

0

最初の問題は、データを更新するために「onDataReceived」関数内で何もしないことにあります。この関数内のコードは、次のようになります。

function onDataReceived(series) {
    data = []; // Delete this line if you want to add graphs, not replace them.
    data.push(series);
    $.plot("#flot-placeholder1", data, options);
}

これにより、リクエストしているページのデータを使用した実際の例が次のようになります。

"label": "Label Name",
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]

最後の問題は、使用しようとしている「gd」機能です。コードで JSON 応答を要求してから、JSON データを解析しようとしています。そのように認識されないのは gd() だけです。

詳細については、Ajax の例を参照し、ソース コードを参照してください: http://www.flotcharts.org/flot/examples/ajax/

幸運を！

編集: gd() 関数を使用する代わりに、UNIX タイムスタンプ (JavaScript の目的で 1000 を掛けた値) を使用します。それは魅力のように機能します。

于 2013-08-27T11:21:48.207 に答える