css - side - d3.js ejemplos

C3.js haciendo que la línea parezca discontinua

Question

Estoy usando C3.js usando dos ejes Y. Tengo 2 series de datos:

data: {
        rows: [
        [''data1'', ''data2'', ''data3''],
        [90, 120, 300],
        [40, 160, 240],
        [50, 200, 290],
        [120, null, 230],
        [80, null, 300],
        [90, null, 320],
    ],
        regions: {
            ''data1'': [{''start'':0, ''style'':''dashed''},],
        }
    }

Cuando ejecuto esto obtengo una línea punteada y luego grafica nulo como una línea punteada a lo largo del eje x. Esto no es lo que quiero. Quiero que deje de graficar cuando el conjunto de datos sea nulo. Si elimino la región, obtengo la funcionalidad que deseo pero no obtengo la línea punteada.

¿Hay alguna manera de obtener la línea discontinua sin graficar los valores nulos?

Answer 1

Como C3 usa SVG, puede emplear selectores de CSS para modificar la apariencia de sus elementos.

Todas las líneas en un gráfico C3 tendrán la clase .c3-line, eche un vistazo: 1 .

Entonces, podríamos agregar esto a nuestro CSS:

.c3-line{
  stroke-dasharray: 5,5;
}

Aquí hay un poco de documentación para stroke-dasharray .