用适当的值在nvd3.js中创建图形 [英] create graph in nvd3.js with proper values

问题描述

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

  var chart; 
 nv.addGraph（function（）{
 chart = nv.models.cumulativeLineChart（）
 .x（function（d）{return d [0]}）
 .y （函数（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：找出一个自动完成此操作的好方法
 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 ），然后concat 000与日期，例如 1375295400000 = strtotime（23-07-2013​​）。000并且这种转换发生在php中）。
第二个问题是在y轴上我想显示整数像2,12,4,19（根据上面的json数据）等
所以请指导我如何做到这一点。
提前致谢。

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

解决方案

寻找像这样的东西？而此处是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'<在'+ y +'/ p''
}）; 
 $处的h3'+ key +'< / h3>'+'< p& b $ b 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：正弦波，
}] 
  

希望它有帮助。

I am using nvd3.js first time in my php code. I want to show a graph count against date for particular user. I want to show the date horizontally and count vertically. But I did not understand how to do that. My json data is like:["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"]]] and

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;
    });

Now in this case my first problem is date is not showing properly(I converted the date to strtotime() and then concat 000 with the date e.g 1375295400000 =strtotime("23-07-2013")."000" and this conversion is happening in php). Second issue is in y axis I want to show the integer like 2,12,4,19(as per above json data) etc. So please guide me how to do that. Thanks in advance.

UPDATE: Sorry to say that it is not d3.js but it is nvd3.js.

解决方案

Looking for something like this ? And here is a working version of the 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",
}]

Hope it helps.

这篇关于用适当的值在nvd3.js中创建图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！