2017-02-21 22 views
1

はJavaFXのでは、私は次のCSSを折れ線グラフに境界線を追加しました:CSSで線図の軸線を取り除く方法は?

.chart-plot-background 
{ 
-fx-border-color: black; 
-fx-border-width: 4px; 
-fx-border-insets: -2px; 
} 

などのチャートに見えます:私は、しかし、取得する方法を見つけ出すことはできません

image

境界線の中央の青い「軸」線を取り除く。これらのx軸とy軸の線を黒色または不可視にするには、何をする必要がありますか?

+0

あなたはより多くのコードでplunkrに投稿することはできますか?そのコードの小さな塊で解読することは不可能です。 – Smit

答えて

1

達成したいことを正確に知るのは少し難しいです。しかし一般的な概要は以下の通りです。うまくいけば、このようなものをあなた自身で修正する方法についてのさらなる方向性を与え、それを修正して必要な効果を正確に得ることができることを願っています。

背景

は、あなたがそのあなたのOracleのJDK 8のインストールに同梱jfxrt.jarファイル内で見つけることができmodena.cssファイルを調べます。このファイルは、チャートのスタイルを定義します。必要な場合は、指定したカスタムCSSスタイルシート内でこれらのスタイルを上書きできます。あなたが設定することができ、チャート上の軸線描画でオフにするには

CSSを経由して

.axis:top { 
    -fx-border-color: transparent transparent AXIS_COLOR transparent; 
} 

制御チャートスタイル:

インスタンスの上罫線の色のデフォルト値は以下のように定義されます軸の境界線の適切な値をtransparent(またはnull)に設定します。たとえば:

.axis:top { 
    -fx-border-color: transparent; 
} 

はまた、あなたのサンプルチャートを使用すると、定義されたカスタムchart-plot-backgroundボーダーの上に描画されますグリッド線を備えています。そのことを防ぐために、グリッド線を透明にすることもできます。サンプルでは、​​-fx-border-insets: -2pxの値をコメントアウトしました。これは、軸上の刻み目の下に境界線を配置するので、奇妙に見えます。

サンプルCSSだから要約でサンプルCSSファイルは以下に似ています。チャートプロットはOracle sample line chart codeに基づいています。

.chart-plot-background { 
    -fx-border-color: black; 
    -fx-border-width: 4px; 
    /*-fx-border-insets: -2px;*/ 
} 

.axis:top { 
    -fx-border-color: transparent; 
} 

.axis:right { 
    -fx-border-color: transparent; 
} 

.axis:bottom { 
    -fx-border-color: transparent; 
} 

.axis:left { 
    -fx-border-color: transparent; 
} 

.chart-vertical-grid-lines { 
    -fx-stroke: transparent; 
} 

.chart-horizontal-grid-lines { 
    -fx-stroke: transparent; 
} 

をプロットすると、上記のCSSで、サンプルチャートは次のようになります。

portfolio

+0

それはまさに私が望んでいたものです。ちょうど軸上の小さな線を取り除くことです。これで解決します、ありがとう! – JustAnotherRandomProgrammer

関連する問題