Строка nvd3 со строковыми значениями по оси x
Я новичок в диаграммах 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]
});
Ответы
Ответ 1
как упоминалось 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]
});
эти решения работали для меня
Ответ 2
Рабочее решение:
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;
});