Extjs Charting Series con línea discontinua

Question

Estoy utilizando Extjs 4 para crear un gráfico de líneas. Ahora quiero crear una serie de gráficos con una línea punteada. Actualmente mi código se ve de la siguiente manera:

series: [{ 
type: 'line', 
axis: 'left', 
xField: 'name', 
yField: 'data1', 
style: { 
    fill: '#18428E', 
    stroke: '#18428E', 
    'stroke-width': 3 
}, 
markerConfig: { 
    type: 'circle', 
    size: 4, 
    radius: 4, 
    'stroke-width': 0, 
    fill: '#18428E', 
    stroke: '#18428E' 
} 
}, ...  

Intenté fijar el 'border-style' a 'trazos', pero esta no funciona ninguno. ¿Es esto posible en ExtJs Charting?

Answer 1

Acaba de perder una propiedad para que funcionen las líneas punteadas. Necesita agregar la propiedad stroke-dasharray también. Aquí está el código de actualización:

style: {    
    fill: '#18428E', 
    stroke: '#18428E', 
    'stroke-width': 3, 
    'stroke-dasharray': 10 // You need to add this! 
}, 
markerConfig: { 
    type: 'circle', 
    size: 4, 
    radius: 4, 
    'stroke-width': 0, 
    fill: '#18428E', 
    stroke: '#18428E' 
}, 

Tendrá que jugar con el valor (10 en mi caso) para obtener su longitud deseada tablero. Tenga en cuenta que esto no funcionará con IE (ya que usa VML para representar el gráfico). Otros navegadores deberían renderizarlo correctamente.

Answer 2

En ExtJS 5.xo 6.x cuando se utilizan los gráficos sencha (no en el paquete ext-charts), stroke-dasharray no funcionará. Después de mucho esfuerzo, descubrió que la propiedad lineDashed de Ext.draw.sprite.Sprite funciona como un amuleto. Por lo tanto, si está utilizando el paquete sencha-gráfico de la configuración de estilo debe ser similar:

style: {    
    fill: '#18428E', 
    stroke: '#18428E', 
    'stroke-width': 3, 
    lineDash: [10,10] // Draws dashed lines 
} 

Esperamos que esto sea útil para cualquier persona que tiene un problema con el sencha-gráficos.