d3.js nvd3.js

d3.js - Gráfico de líneas nvd3 con valores de cadena en el eje x



nvd3.js (2)

Solución de trabajo:

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; });

Soy nuevo en nvd3 charts. Necesito un gráfico de líneas, con valores de cadena en el eje x, el gráfico debería ser como este gráfico de barras , pero necesito una línea, en lugar de barras

Mi resultado se parece a este gráfico de líneas. Todos los valores se asignan a x = 0

mi código

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; });

y mis datos

[{"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"}]}]

Intenté mucho, pero no tengo idea de qué hacer.

Cualquier ayuda o sugerencia sería genial.

Solución, como mencionó dcclassics, tomé valores numéricos en lugar de cadenas y luego usé tickValues ​​y 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] });


como mencionó dcclassics, tomé valores numéricos en lugar de cadenas y luego usé tickValues ​​y 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] });

estas soluciones funcionaron para mi