我是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;
});
Run Code Online (Sandbox Code Playgroud)
和我的数据
[{"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"}]}]
Run Code Online (Sandbox Code Playgroud)
我尝试了很多,但不知道该怎么做.
任何帮助或建议都会很棒
像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]
});
Run Code Online (Sandbox Code Playgroud)