Gráficos de barras y líneas de mezcla con Rickshaw (biblioteca gráfica basada en d3 para js)

Question

Al usar la biblioteca de trazado d3 Rickshaw, el representador (ya sea área, línea o barra) se establece en el gráfico. ¿Hay alguna forma de tener un gráfico con series múltiples donde una serie se traza como una línea y otra como una barra?

Answer 1

He intentado el mismo caso de uso.

Modifiqué la fuente de Rickshaw. Pero encontré este.

nvd3 admite mixture graph.

Answer 2

Encontré más una solución que una solución, pero puede ser útil de todos modos.

Puede dibujar dos gráficos del carrito en la parte superior de uno al otro:

<div style="height: 0; overflow: visible;"> 
    <div id="barChart" style="height: 300px;"></div> 
</div> 

<div style="height: 0; overflow: visible;"> 
    <div id="lineChart" style="height: 300px;"></div> 
</div> 

Ahora dibuje las dos tablas con dos llamadas a Rickshaw.Graph() para cada uno de los divs tabla. Tenga en cuenta que debe duplicar el último punto en el gráfico de líneas; de lo contrario, no obtendrá coincidencias precisas en el eje x.

Sé que esto es feo, pero puede ser útil para gráficos simples. Sin embargo, no sé qué sucederá si pruebas esto con efectos de desplazamiento o similares.

Si hay una solución limpia para esto, me interesaría también.

Answer 3

Hay un pull request para combinar varias tablas en Rickshaw. Aparentemente, el enfoque aún necesita un refinamiento, pero el código parece funcionar en su mayoría.

Actualmente puede clonar el feature branch y ver si se ajusta a sus propósitos.

Answer 4

¡Ahora puede combinar gráficos en rickshaw!

El tipo de procesador se denomina 'multi'. ¿Cómo funciona es que se da cada serie individuo su propio procesador distinto, es decir

var graph = new Rickshaw.Graph({ 
    element: el, width: 960, height: 500, 
    padding: { top: 0, right: 0, bottom: 0, left: 0 }, 
    renderer: 'multi', 
    series: [ 
     { 
      renderer: 'line', 
      data: [ 
       { x: 0, y: 40 }, 
       { x: 1, y: 49 } 
      ] 
     }, 
     { 
      renderer: 'bar', 
      data: [ 
       { x: 0, y: 30 }, 
       { x: 1, y: 60 } 
      ] 
     }, 
    ] 
}); 

ejemplo completo aquí https://github.com/shutterstock/rickshaw/blob/a240899625c2d83961b3e682cd77ab8e5199a866/tests/Rickshaw.Graph.Renderer.Multi.js