2015-04-24 5 views
0

У меня есть график LineChart. Я хочу, чтобы цвет прямоугольной границы области графика.Как установить цвет границы в линейной диаграмме

"-fx-border-color: черный прозрачный прозрачный прозрачный;" добавьте границу оси x или y.

"-fx-border-color: black" добавить границу вокруг полной диаграммы.

Но мне нужна граница вокруг только графы области, как показано в приложении

Любой помощь будет полезна. enter image description here

Благодаря

ответ

0

вы можете проверить, что в вашем CSS файл:

/* chart background */ 
 
.chart-plot-background { 
 
    -fx-background-color: blue; 
 
} 
 
/* frame background */ 
 
.chart{ 
 
    -fx-background-color: pink; 
 
} 
 
/* border content */ 
 
.chart-content{ 
 
    -fx-padding: 0px; 
 
    -fx-border-color: black; 
 
    -fx-border-width: 3px; 
 
}

+0

Это похоже на добавление границы в полный график. Я хочу добавить прямоугольную рамку только вокруг области графика. Это исключает ось x/y, легенды минор/основной тик линейной диаграммы. Это не помогло мне – Kishore

+0

Я вижу, что вы хотите, я пробовал .chart-plot или .chart-plot-border, но это не работает, извините. – Thomas

3

Border CSS

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

Gi VES вам:

forest

зеленая рамка вокруг содержимого диаграммы участка является то, что выше CSS обеспечивает.

На пунктирными линиями

Вы заметите, что есть пунктирные линии и оси, нарисованные на верхней части зеленой границы. Возможно, вам нужна граница за этими строками, возможно, вы хотите ее сверху, возможно, вы не хотите рисовать эти пунктирные линии вообще.

Если у вас есть граница за пунктирными линиями, вам больше не нужно ничего делать.

Если вы не хотите, чтобы нарисовать пунктирные линии, вы можете удалить их:

lineChart.setAlternativeRowFillVisible(false); 
lineChart.setAlternativeColumnFillVisible(false); 
lineChart.setHorizontalGridLinesVisible(false); 
lineChart.setVerticalGridLinesVisible(false); 

и настроить врезки вашего прямоугольника соответственно:

.chart-plot-background { 
    -fx-border-color: forestgreen; 
    -fx-border-style: solid; 
    -fx-border-width: 4px; 
    -fx-border-insets: 0 0 0 1; 
} 

no lines

Если вы хотите сохранить пунктирные линии и нарисовать прямоугольник сверху диаграммы, вы можете поместить диаграмму в StackPane, запустите chart.lookup(".chart-plot-background") после диаграмма была отображена, контролирует границы результирующего узла фона диаграммы и добавляет новый прямоугольник в верхнюю часть стека, который привязан к границам фонового графика, как в этом layout bounds demo. Вы, вероятно, не хотите этого делать.

Как сделать этот материал самостоятельно

Использование инструментов, таких как ScenicView или анализатор CSS в SceneBuilder, или изучения CSS reference guide или в modena.css файл в jfxrt.jar поставляется вместе с JRE может помочь вам определить правила CSS вам необходимость.

+0

Спасибо jewelsea. Это работает в ожидании :) – Kishore

Смежные вопросы