Extjs Charting Series with dashed line

我使用Extjs 4來創建折線圖。現在我想用虛線創建一個圖表系列。目前我的代碼看起來如下：Extjs Charting Series with dashed line

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

我試着將'border-style'設置爲'dashed'，但這不起作用。這可能在ExtJs製圖？

來源

2011-06-07 ollifant

我在下面嘗試了兩個答案，但沒有工作，這個選項對我有用： 'style：{dashArray：[5,5]}' – bocanegra 2015-12-15 19:54:50

你只是錯過了一個屬性讓虛線工作。您還需要添加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來渲染圖）。其他瀏覽器應該正確渲染它。

來源

2011-06-08 05:59:39

在使用sencha-charts（不是ext-charts包）的ExtJS 5.x或6.x中，stroke-dasharray不起作用。經過不懈的努力，發現Ext.draw.sprite.Sprite作品的lineDashed屬性就像一種魅力。所以，如果你使用的是煎茶，圖表包裝風格的配置應該是這樣的：

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

希望這將是與煎茶，圖表有問題有用的人。

來源

2015-10-15 13:12:18 SSn

這實際上是'lineDash'。見http://docs.sencha.com/extjs/6.0.2-classic/Ext.draw.sprite.Sprite.html#cfg-lineDash – Bostone 2016-08-08 15:30:52

感謝@bostone - 我已經更新了答案。 – Stuart 2017-07-06 12:12:47

Extjs Charting Series with dashed line

回答

相關問題