在Y轴上显示值,因为它具有NVD3折线图的上限和下限

时间:2016-01-06 06:39:58

标签: javascript d3.js nvd3.js

我有一个虚拟数据的折线图

我的图表完美绘制,但Y轴上的值未显示数千。 以下数据中的值将来自后端,仅为数千,因此需要一个解决方案来按原样打印y轴。

[{"key":"City31","values":[["1990",6428.59],["1991",7079.34],["1992",4014.61],["1993",4000.77],["1994",4005.34],["1995",4182.21],["1996",4034.73],["1997",5891.87],["1998",4735.89],["1999",4039.58],["2000",4000],["2001",5030.29],["2002",4000.03],["2003",4000.43],["2004",4321.92],["2005",12575.87],["2006",4000],["2007",4027.99],["2008",4000],["2009",5087.42],["2010",6584.68],["2011",4000],["2012",4000],["2013",4000],["2014",29458.22],["2015",4068.58],["2016",4000.01],["2017",4000.12],["2018",4000],["2019",4003.91],["2020",8956.47],["2021",4000],["2022",4000],["2023",4000],["2024",4000],["2025",4264.9],["2026",4222.05],["2027",4039.94],["2028",4019.64],["2029",4000],["2030",4000.34],["2031",4279.83],["2032",4000],["2033",4006.69],["2034",4000],["2035",4000],["2036",4000],["2037",4000],["2038",4000],["2039",4000],["2040",4000],["2041",4000],["2042",4000],["2043",4627.18],["2044",4000],["2045",4000],["2046",4000],["2047",4000.11],["2048",4000],["2049",4000.04],["2050",4000.19]]},{"key":"City32","values":[["1990",6428.59],["1991",7079.34],["1992",4014.61],["1993",4000.77],["1994",4005.34],["1995",4182.21],["1996",4034.73],["1997",5891.87],["1998",4735.89],["1999",4039.58],["2000",4000],["2001",5030.29],["2002",4000.03],["2003",4000.43],["2004",4321.92],["2005",12575.87],["2006",4000],["2007",4027.99],["2008",4000],["2009",5087.42],["2010",6584.68],["2011",4000],["2012",4000],["2013",4000],["2014",29458.22],["2015",4068.58],["2016",4000.01],["2017",4000.12],["2018",4000],["2019",4003.91],["2020",8956.47],["2021",4000],["2022",4000],["2023",4000],["2024",4000],["2025",4264.9],["2026",4222.05],["2027",4039.94],["2028",4019.64],["2029",4000],["2030",4000.34],["2031",4279.83],["2032",4000],["2033",4006.69],["2034",4000],["2035",4000],["2036",4000],["2037",4000],["2038",4000],["2039",4000],["2040",4000],["2041",4000],["2042",4000],["2043",4627.18],["2044",4000],["2045",4000],["2046",4000],["2047",4000.11],["2048",4000],["2049",4000.04],["2050",4000.19]]}]

代码:

nv.addGraph(function() {
        var chart = nv.models.cumulativeLineChart()
                      .x(function(d) { return d[0] })
                      .y(function(d) { return d[1] }) //adjusting, 100% is 1.00, not 100 as it is in the data
                      .color(d3.scale.category10().range())
                      .useInteractiveGuideline(false); 
        //chart.yAxis.tickFormat(d3.format(',.0d'));
        d3.select('#chart2 svg')
            .datum(chartdata)
            .call(chart);
        nv.utils.windowResize(chart.update);
return chart;
    });

输出: enter image description here

1 个答案:

答案 0 :(得分:1)

您应该使用折线图而不是累积图表。

var chart = nv.models.lineChart()
              .x(function(d) { return d[0] })
              .y(function(d) { console.log(d);return d[1] }) 
              .color(d3.scale.category10().range())
              .useInteractiveGuideline(true)
              ;

工作代码here

希望这有帮助!