D3.js x轴带字符串值的nvd3折线图
我是nvd3图表的新手。我需要一个折线图,在x轴上有字符串值 图表应该是这样的,但我需要一条线,而不是条线 我的结果是这样的 这些值都映射到x=0 我的代码D3.js x轴带字符串值的nvd3折线图,d3.js,nvd3.js,D3.js,Nvd3.js,我是nvd3图表的新手。我需要一个折线图,在x轴上有字符串值 图表应该是这样的,但我需要一条线,而不是条线 我的结果是这样的 这些值都映射到x=0 我的代码 nv.addGraph(function() { var chart = nv.models.lineChart() .useInteractiveGuideline(true) .transitionDuration(350) .x(function(d) { return d.x}) .y(f
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"}]}]
我试了很多,但不知道该怎么办
任何帮助或建议都会很好
解决方案 就像前面提到的,我用数值代替字符串 然后使用TickValue和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]
});
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]
});
工作解决方案:
var data = [{"color":"#a215af","key":"products","values":[
{"y":0,"x":0},
{"y":0,"x":1},
{"y":1,"x":2},
{"y":6,"x":3},
{"y":2,"x":4},
{"y":0,"x":5},
{"y":13,"x":6}]}]
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);
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]
});
d3.select(element + ' svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
正如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]
});
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]
});
这个解决方案对我很有效如果我没记错,如果将X轴值更改为数字会发生什么?(1-7)而不是几天?标签不会告诉它在哪里打印数据,它需要知道数据的值。thx!对于数字,它可以工作,但我需要字符串值。有没有办法将标签映射到数字?使用scale.ordinal或类似的东西?我找到了解决方案并更新了问题!thx经典!请为您自己的问题创建一个答案,mark作为接受者。