/ /破線を使用したExtjsチャートシリーズ-extjs、extjs4

Extjsチャートシリーズ - 破線 - 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 Chartingで可能ですか?

回答:

回答№1は6

破線を機能させるために、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を使用してグラフをレンダリングするため)。他のブラウザでは適切にレンダリングする必要があります。


回答№2については2

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-chartsに問題がある人に役立つことを願っています。