带虚线的 Extjs 图表系列

Question

我正在使用 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 图表中可能吗？

Answer 1

您只是错过了一个属性来使虚线起作用。您需要添加 stroke-dasharray属性(property)也是如此。这是更新后的代码:

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 来呈现图形)。其他浏览器应该正确呈现它。