Серия графиков Extjs с пунктирной линией - PullRequest
Новая
       4

Серия графиков Extjs с пунктирной линией

5 голосов
/ 08 июня 2011

Я использую 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 Charting?

Ответы [ 2 ]

6 голосов
/ 08 июня 2011

Вы просто пропустили одно свойство, чтобы заработали пунктирные линии. Вам также необходимо добавить свойство 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 для визуализации графика). Другие браузеры должны отображать его правильно.

2 голосов
/ 15 октября 2015

В ExtJS 5.x или 6.x при использовании sencha-charts (не пакет ext-charts), stroke-dasharray не будет работать.После долгих усилий обнаруженное свойство lineDashed Ext.draw.sprite.Sprite работает как шарм.Поэтому, если вы используете пакет sencha-chart, конфигурация стиля должна выглядеть следующим образом: 

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

Надеюсь, это будет полезно для всех, у кого есть проблемы с диаграммами sencha.

...