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

我尝试设置边框风格＆＃39;为了破坏＆＃39;但这不起作用。这在ExtJs Charting中是否可行？

Answer 1

你错过了一个属性来让虚线工作。您还需要添加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渲染图形）。其他浏览器应该正确呈现它。

Answer 2

在使用sencha-charts（不是ext-charts包）时，在ExtJS 5.x或6.x中，stroke-dasharray将不起作用。经过大量努力，发现lineDashed的{{1}}属性就像一个魅力。因此，如果您使用的是sencha-chart包，则样式配置应如下所示：

Ext.draw.sprite.Sprite

希望这对任何遇到sencha-charts问题的人都有用。

Extjs Charting Series with dashed line

2 个答案: