0

我第一次在我的 php 代码中使用 nvd3.js。我想针对特定用户的日期显示图表计数。我想水平显示日期并垂直计数。但我不明白该怎么做。我的 json 数据是这样的：["key":"0","values":[["1374517800000","2"]]},"182398":{"key":"182398","values":[["1375295400000","2"],["1374517800000","2"],["1374604200000","12"],["1374431400000","1"],["1375122600000","4"],["1375209000000","19"]]},"185271":{"key":"185271","values":[["1374604200000","2"],["1374517800000","1"]]]和

var chart;
nv.addGraph(function() {  
    chart = nv.models.cumulativeLineChart()
    .x(function(d) { return d[0]})
    .y(function(d) { return d[1]})
    .color(d3.scale.category10().range())
    .clipVoronoi(false);

    chart.xAxis
    .tickFormat(function(d) {
        return d3.time.format('%x')(new Date(d))
    });

    chart.yAxis
    .tickFormat(d3.format(',.1%'));

    d3.select('#cumulative_line_chart svg')
    .datum(stageArr)
    //.transition().duration(500)
    .call(chart);

    //TODO: Figure out a good way to do this automatically
    nv.utils.windowResize(chart.update);
    //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
    return chart;
    });

现在在这种情况下，我的第一个问题是日期显示不正确（我将日期转换为 strtotime() ，然后将 000 与日期连接起来，例如1375295400000 =strtotime("23-07-2013")."000"，这种转换发生在 php 中）。第二个问题是在 y 轴上我想显示像 2,12,4,19 之类的整数（根据上面的 json 数据）等。所以请指导我如何做到这一点。提前致谢。

更新：很抱歉，它不是 d3.js，而是 nvd3.js。

4

2 回答 2

1

寻找这样的东西？这是 cde 的工作版本

nv.addGraph(function () {
    var chart = nv.models.lineChart().margin({
        top: 30,
        right: 20,
        bottom: 50,
        left: 45
    }).showLegend(true).tooltipContent(function (key, y, e, graph) {
        return '<h3>' + key + '</h3>' + '<p>' + e + '% at ' + y + '</p>'
    });

    chart.xAxis.tickFormat(function (d) {
        return d3.time.format('%x')(new Date(d))
    });

    d3.select('#lineChart svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

data = [{
    "values": [{
        "x": 1025409600000 ,
            "y": 2
    }, {
        "x": 1028088000000 ,
            "y": 4
    }, {
        "x": 1030766400000 ,
            "y": 1
    }, {
        "x": 1033358400000 ,
            "y": 3
    }, {
        "x": 1036040400000  ,
            "y": 0
    }, {
        "x": 1038632400000  ,
            "y": 3
    }],
        "key": "Sine Wave",
}]

希望能帮助到你。

于 2013-08-05T13:03:18.077 回答
0

您必须定义轴的比例：它不是根据您的数据计算的，但您可以使用 d3 的辅助函数，例如 d3.max ...

var xScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                 .range([0, w]);

cf http://alignedleft.com/tutorials/d3/scales

然后，您可以将比例定义添加到轴：

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

cf http://alignedleft.com/tutorials/d3/axes

于 2013-08-05T10:30:11.823 回答