Extjs Charting Series s prerušovanou čiarou - extjs, extjs4

Na vytvorenie čiarového grafu používam Extjs 4. Teraz chcem vytvoriť sériu grafov s prerušovanou čiarou. V súčasnosti vyzerá môj kód nasledujúcim spôsobom:

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

Snažil som sa nastaviť „štýl hraníc“ na „prerušovaný“, ale ani to nefunguje. Je to možné v grafe ExtJs?

odpovede:

Zmeškali ste jedno vlastníctvo, aby ste prerušili čiary. Musíte pridať stroke-dasharray majetku. Tu je aktualizovaný kód:

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"
},

Budete musieť hrať s hodnotou (10 v mojejprípad) a získajte požadovanú dĺžku pomlčky. Všimnite si, že to nebude fungovať s IE (od jeho použitia VML na vykreslenie grafu). Iné prehliadače by ju mali vykresliť správne.

V ExtJS 5.x alebo 6.x pri použití sencha-chart (nie balíček ext -arts), stroke-dasharray Po dlhom úsilí, objavil lineDashed majetok Ext.draw.sprite.Sprite Funguje ako kúzlo. Ak teda používate balík sencha-chart, konfigurácia štýlu by mala vyzerať takto:

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

Dúfam, že to bude užitočné pre každého, kto má problémy s grafmi sencha.