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