Extjs Charting Series с пунктирана линия - extjs, extjs4

Използвам Extjs 4 за създаване на линия. Сега искам да създам графична серия с пунктирана линия. Понастоящем кодът ми изглежда по следния начин:

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

Опитах да настроя "граничния стил" на "смачкан", но това не работи. Възможно ли е това в графиката на ExtJs?

Отговори:

Просто пропуснахте една собственост, за да получите пунктираните линии. Трябва да добавите stroke-dasharray имот също. Ето актуализирания код:

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

Ще трябва да играете със стойността (10 в мояслучай), за да получите желаната дължина на тирето. Имайте предвид, че това няма да работи с IE (тъй като използва VML за изобразяване на графиката). Другите браузъри трябва да го правят правилно.

В ExtJS 5.x или 6.x, когато използвате сенча-диаграми (не пакет ext-графики), stroke-dasharray няма да работи. След много усилия открих lineDashed собственост на Ext.draw.sprite.Sprite работи като чар. Така че, ако използвате пакет sencha-chart, конфигурацията на стила трябва да изглежда така:

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

Надявам се, че това ще бъде полезно за всеки, който има проблем със сенча-диаграми.