nvd3折线图在x轴上带有字符串值 [英] nvd3 line chart with string values on x-axis
问题描述
我是nvd3图表的新手。我需要一个折线图,在x轴的字符串值
图表应该像这样条形图,但我需要一条线,而不是柱
i'm new to nvd3 charts. i need a line chart, with string-values on the x-axis the chart should be like this Bar Chart, but i need a line, instead of bars
我的结果看起来像这样折线图
这些值都映射到x = 0
my result looks like this Line Chart The values are all mapped to 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"}]}]
我尝试了很多,但不知道该怎么办。
i tried a lot, but have no idea what to do.
任何帮助或建议会很好
解决方案
像dcclassics提到的,我使用数字值而不是字符串
,然后使用tickValues和tickFormat :
Solution like dcclassics mentioned i took number values instead of strings and then used tickValues and 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]
});
推荐答案
like dcclassics提到我取数字值,然后使用tickValues和tickFormat:
like dcclassics mentioned i took number values instead of strings and then used tickValues and 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]
});
此解决方案适用于我
这篇关于nvd3折线图在x轴上带有字符串值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!