agrupados y apilados multiBarChart con NVD3

Question

Posible pregunta duplicado a Bar chart in Javascript: stacked bars + grouped bars

Estoy intentando crear un gráfico de barras apiladas que le permite comparar 2 valores (oscuro y azul medio) a los puntos de datos de la semana pasada (los azules claros secundarias 'detrás').

1. A partir de multiBarChart() con .stacked(true) Primero probé la fusión de las dos semanas en un único array de 14 bares, donde la posición x podría ayudar grupo de los bares. Probé para formar mi matriz combinada de objetos donde los valores .x propiedades son 0, 0.3, 1, 1.3, 2, 2.3, etc. Desafortunadamente diferencia lineChart() que no utiliza el valor x para el posicionamiento.

2. Otra idea es explotar el grupo .stacked(false), proporcionando 4 elementos (en lugar de 2) con el mismo valor x. Estos aparecen superpuestos uno encima del otro en lugar de superpuestos. Aquí el espaciado se ve bien, pero ¿cómo puedo apilar estos 2 por 2?

Answer 1

Permítanme decir por adelantado que yo SOY un experto en nvd3. Apenas estoy pasando la etapa de inicio.

Dicho esto, parece que estás haciendo esto demasiado duro para ti.

Creo que realmente desea enviar nvd3 dos conjuntos de datos, con la x coincidencia entre los dos. (Por ejemplo, (1, Y1A) correspondiente a (1, Y2A), entonces (2, Y2A) con (2, Y2B), etc.)

Esto se puede ver más claramente por la siguiente:

1. cabeza a su Live Code page
2. Seleccione el Chart Group/barras apiladas.
3. Seleccione la ficha Datos (JSON).
4. reemplazar la primera función con el siguiente, y observar los valores de x resultantes .:

    function() { 
     return stream_layers(2,10,.1).map(function(data, i) { 
     alert('Stream '+i+': '+JSON.stringify(data)); 
     return { 
      key: 'Stream' + i, 
      values: data 
     }; 
     }); 
    } 

mejor como yo lo entiendo, ese es el modelo que está buscando.

Answer 2

Hola Acabo de desarrollar un gráfico de barras agrupadas + apiladas en d3.js. No es NVD3 pero puede ser útil.

• Source

• Demo