0

nvd3/d3 を使用して単純な折れ線グラフを描画しようとしています。「マウスオーバー」中にデータポイントで発生する遷移は表示されません。これを修正する方法?.

以下のコードを追加します。

Date.prototype.addHours = function(h) {
    this.setHours(this.getHours() + h);
    return this;
};

function getData(transport) {
    var arr = [];
    for (var i = 0; i < transport.length; i++) {
        arr.push({
            x : new Date(transport[i].timePeriod).addHours(7),
            y : transport[i].number
        });
    }
    return arr;
}

function cumulativeTestData(transport) {

    return [{
        key : "Active Customers",
        values : getData(transport),
        color : "#ff7f0e"
    }];
}

nv.addGraph(function() {
    var chart;
    chart = nv.models.lineChart().x(function(d) {
        return d.x;
    }).y(function(d) {
        return d.y;
    });

    chart.xAxis.tickFormat(function(d) {
        return d3.time.format("%d-%m-%y")(new Date(d));
    });

    chart.yAxis.tickFormat(d3.format(',g'));
    d3.select('#chart1 svg').datum(cumulativeTestData(transport))
    //  .transition().duration(500)
    .call(chart);

    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) {
        nv.log('New State:', JSON.stringify(e));
    });

    return chart;
});

$(function() {
    $("#day").click(function() {
        var from = $("#from").val();
        var to = $("#to").val();
        $.ajax({
            url : "http://api.local/api/GraphData?startDate=" + from + "&endDate=" + to,
            type : 'GET',
            contentType : "application/javascript",
            crossDomain : true,
            dataType : "jsonp",
            cache : false,
            async : false,
            success : function(transport) {
                //  nv.addGraph(drawGraph(transport));
                drawGraph(transport);
            },
            error : function() {
                alert("failed in calling status");
            }
        });
    });
});

このコードを個別に実行すると、データ ポイントが表示されますが、このグラフを他の多くのコントロールに含める必要があるため、データ ポイントが機能していないようです。

また、折れ線グラフの特定のデータ ポイントをクリックすると、火のバグのコンソールにこのエラーが表示されることを追加したい

エラー: 属性 cx="NaN" の値が無効です

4

1 に答える 1

3

に渡されたデータからアクセスできるように、JSON 構造を変更してと にnumberなるようにする必要がある場合があります。ytimePeriodxlineChart()

chart = nv.models.lineChart().x(function(d) {
        return d.x;
    }).y(function(d) {
        return d.y;
    });

使用している場合:

chart.xAxis.tickFormat(function(d) {
        return d3.time.format("%d-%m-%y")(new Date(d));
    });

日付はUNIX TIME STAMP FORMAT で返されます。UNIX TIME STAMPを送信しない場合は、 を使用してchart.xAxis.tickFormat()ください。

フィドルで実行されているサンプル コードがあります。

最後に、これに似たデータ構造が必要です。

data = [{
    "values" : [{
        "x" : 1025409600000,
        "y" : 0
    }, {
        "x" : 1028088000000,
        "y" : 0.09983341664682815
    }, {
        "x" : 1030766400000,
        "y" : 0.19866933079506122
    }, {
        "x" : 1033358400000,
        "y" : 0.29552020666133955
    }, {
        "x" : 1036040400000,
        "y" : 0.3894183423086505
    }],
    "key" : "Line 1",
    "color" : "#ff7f0e"
}, {
    "values" : [{
        "x" : 1025409600000,
        "y" : 0.5
    }, {
        "x" : 1028088000000,
        "y" : 0.4975020826390129
    }, {
        "x" : 1030766400000,
        "y" : 0.4900332889206208
    }, {
        "x" : 1033358400000,
        "y" : 0.477668244562803
    }, {
        "x" : 1036040400000,
        "y" : 0.46053049700144255
    }],
    "key" : "Line 2",
    "color" : "#2ca02c"
}]

それが役に立てば幸い。

于 2013-06-04T09:46:58.650 に答える