soy nuevo en el nvd3 gráficos. necesito un gráfico de líneas, con cadena de valores en el eje x
el gráfico debe ser como este Gráfico De Barras, pero necesito una línea, en lugar de las barras de

mi resultado parece este Gráfico De Líneas
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"}]}] 

he intentado un montón, pero no tienen idea de qué hacer.

cualquier ayuda o sugerencia, sería de gran


Solución
como dcclassics mencionó que tomó el número de valores en lugar de cadenas de
y, a continuación, utiliza 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]
});
Si recuerdo correctamente, ¿qué sucede si cambia su eje X los valores de los números? (1-7) en lugar de días? Las etiquetas no decir dónde trazar los datos, se necesita saber el valor de los datos.
thx! con los números que funciona Gráfico, Pero necesito los valores de cadena. es allí una manera de asignar etiquetas a los números? con la escala.ordinal, o algo por el estilo?
He encontrado una solución y actualizada de la cuestión! thx dcclassics!
Por favor, cree una respuesta a su propia pregunta y marca es el perdonador.

OriginalEl autor tobeController | 2014-05-18

2 Comentarios

  1. 17

    como dcclassics mencionó que tomó el número de valores en lugar de cadenas de caracteres y, a continuación, utiliza 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]
    });

    esta solución funcionó para mí

    Raro…esto no funciona para mí.

    OriginalEl autor tobeController

  2. 5

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

    OriginalEl autor Régis

Dejar respuesta

Please enter your comment!
Please enter your name here