2011-06-07 28 views
5

Bir çizgi grafik oluşturmak için Extjs 4 kullanıyorum. Şimdi kesikli bir çizgi ile bir grafik serisi oluşturmak istiyorum. Ben 'kesik' olarak 'border-style' ayarı çalıştıExtjs Kesikli çizgi ile Seri Çizme

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' 
} 
}, ...  

ama bu ne işleri: Şu anda benim kod aşağıdaki şekilde görünüyor. Bu, ExtJs Grafiklendirmesinde kullanılabilir mi?

+0

Her iki çözümü de denedim ama işe yaramadı, bu seçenek benim için çalıştı: 'stili: {dashArray: [5,5]}' – bocanegra

cevap

6

Kesik çizgiler çalışırken tek bir özelliği kaçırdınız. stroke-dasharray özelliğini de eklemeniz gerekiyor. (Benim durumumda 10)

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' 
}, 
Sen değerle oynamak zorunda kalacak

istediğiniz çizgi uzunluğunu almak için: İşte güncellenen koddur. Bunun IE ile çalışmayacağını unutmayın (grafiğin oluşturulması için VML kullanıldığından beri). Diğer tarayıcılar düzgün şekilde oluşturmalıdır.

2

sencha-chart'ları kullanırken (ext-chart paketi değil), ExtJS 5.x veya 6.x'te stroke-dasharray çalışmayacaktır. Çok çaba sarf ettikten sonra,mülkünü Ext.draw.sprite.Sprite bir cazibeye benzeterek keşfettiniz. Bu sencha-grafiklerle herkesin sahip problemi için faydalı olacaktır

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

Hope: Eğer sencha-grafik paketi kullanıyorsanız Yani, stil yapılandırma gibi görünmelidir.

+1

Bu aslında 'lineDash'. Bkz. Http://docs.sencha.com/extjs/6.0.2-classic/Ext.draw.sprite.Sprite.html#cfg-lineDash – Bostone

+0

Teşekkürler @bostone - Cevabı güncelledim. – Stuart

İlgili konular