nvd3折线图,x轴上有字符串值

tobeController

我是nvd3图表的新手。我需要一个折线图,在x轴上具有字符串值,该图应类似于此条形图,但我需要一条线而不是条形图

我的结果看起来像这样的折线图,所有值都映射到x = 0

我的密码

nv.addGraph(function() {
    var chart = nv.models.lineChart()
    .useInteractiveGuideline(true) 
    .transitionDuration(350)
    .x(function(d) { return d.x}) 
    .y(function(d) { return d.y}) 
    .showLegend(true)
    .showYAxis(true)
    .showXAxis(true);

    chart.xAxis.tickValues(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]);

    d3.select(element + ' svg')
    .datum(data) 
    .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

和我的数据

[{"color":"#a215af","key":"products","values":[
    {"label":"Monday","y":0,"x":"Monday"},
    {"label":"Tuesday","y":0,"x":"Tuesday"},
    {"label":"Wednesday","y":1,"x":"Wednesday"},
    {"label":"Thursday","y":6,"x":"Thursday"},
    {"label":"Friday","y":2,"x":"Friday"},
    {"label":"Saturday","y":0,"x":"Saturday"},
    {"label":"Sunday","y":13,"x":"Sunday"}]}] 

我尝试了很多,但不知道该怎么办。

任何帮助或建议将是巨大的


像dcclassics这样的解决方案提到我使用数字值而不是字符串,然后使用tickValues和tickFormat:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
    return days[d]
});
tobeController

就像dcclassics提到的那样,我使用数字值而不是字符串,然后使用tickValues和tickFormat:

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
    return days[d]
});

这个解决方案对我有用

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章