Вопрос по javafx-2 – Как установить определенный цвет для JavaFX XYChart.Series?

7

Я пытаюсь стилизовать мою линейную диаграмму JavaFX, но не могу найти способ установить цвет для определенной серии. Я знаю, что могу стилизовать с помощью CSS, но не могу найти, как установить ID или CLASS для моей серии.

Может кто-нибудь дать мне подсказку:

How to set a color to linecharts? How to set a css class to series?

Ваш Ответ

4   ответа
5

How to set a color to linecharts?

Вот простой способAreaChart или жеLineChart

XYChart chart = new AreaChart();
Series series = new Series();
chart.getData().add(series);

Node fill = series.getNode().lookup(".chart-series-area-fill"); // only for AreaChart
Node line = series.getNode().lookup(".chart-series-area-line");

Color color = Color.RED; // or any other color

String rgb = String.format("%d, %d, %d",
        (int) (color.getRed() * 255),
        (int) (color.getGreen() * 255),
        (int) (color.getBlue() * 255));

fill.setStyle("-fx-fill: rgba(" + rgb + ", 0.15);");
line.setStyle("-fx-stroke: rgba(" + rgb + ", 1.0);");
Для LineChart попробуйтеseries.getNode().lookup(".chart-series-line");.
Я получаю нулевое значение в этих строках: series.getNode (). Lookup (& quot; .chart-series-area-fill & quot;); . Series.getNode () поиск (& Quot; .chart серии участку линии & Quot;); Я использую диаграмму области.
Я хотел бы подчеркнуть, чтоseries.getNode().lookup() должен быть названafter добавление ряда в диаграмму, в противном случае возвращается ноль.
2

Кажется, в ответе Jewelsea говорится, что вы должны поместить класс стилей в каждый узел серии. Я использую следующий код для стилизации серии диаграммы области и назначаю только класс узлу, связанному с серией. Пример кода написан на Scala, но его легко перевести.

При создании серии я добавляю класс стиля, специфичный для серии:

        val s = new XYChart.Series[Number, Number]()   //create a new series
        s.setName(seriesName)                          //set its name (display in legend)
        s.getNode.getStyleClass.add("series-" + seriesName)  //add specific style class

Тогда внутриcss-файл я делаю следующее, чтобы изменить цвет заливки серии 'butterwings':

.series-butterwings *.chart-series-area-fill{
    -fx-fill: #aab597; 
}

Это работает, потому что узел для области серии находится ниже узла серии (который является группой в случае диаграммы области).

Я пытался это сделать, но обнаружил, что моя программа зависла наadd вызов. У кого-нибудь был подобный опыт? Я делаю это из ScalaFx; не знаю, имеет ли это значение (хотя я вызываю нативные методы javafx, а не оболочки).
4

Я нашел этот документ Oracle наСтилизация диаграмм с помощью CSS и на этой странице прокрутите вниз доSetting Chart Colors за то, что вы конкретно ищете.

How to set a color to linecharts?

Простейшим способом для этого является следующий фрагмент кода CSS:

.default-color0.chart-series-line { -fx-stroke: #e9967a; }
.default-color1.chart-series-line { -fx-stroke: #f0e68c; }
.default-color2.chart-series-line { -fx-stroke: #dda0dd; }

К сожалению, это не будет работать по идентификатору или серии, а скорее по порядку, в котором серии расположены на графике. Вы также можете установить стили линий, выполнив:

.chart-series-line {    
    -fx-stroke-width: 2px;
    -fx-effect: null;
}

How to set a css class to series?

К сожалению, я не вижу способа сделать это. Было бы неплохо иметь возможность создавать правила CSS на основе свойства имени XYChart.Series, но я не думаю, что это возможно.

Это решение не меняет цвет серии в легенде.
Спасибо, я думал об изменении цветов по умолчанию, но мне нужно будет отключить / включить серию (у пользователя будет функциональность, чтобы показать / скрыть серию). И таким образом это не лучший способ сделать это. Yurish
13

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

Вот информация о динамическом измененииСтиль линейной диаграммы JavaFX ипример программы идти с ответом. В примере приложения все дополнительные стили CSS выполняются с помощью вызова setStyle из кода. Используя подобную технику поиска, вы можете получить доступ к узлам серии, чтобы применить соответствующий класс стилей таблицы стилей, а не вызов setStyle.

Просто хочу сказать, что у вас есть несколько хороших примеров программ на вашем аккаунте git. Сегодня я столкнулся с ними раньше и потерял пару часов, просто просматривая их. Очень полезный ресурс. Благодарю.
Я могу поверить, что стилизация диаграмм на основе CSS хорошо работает для «панели управления»; программное обеспечение, но это мерзость для тех, кто пытается работать с данными в интерактивном режиме. Даже библиотеки диаграмм javascript обычно не вынуждают вас обновлять таблицу стилей для изменения размера точек на одной диаграмме рассеяния.

Похожие вопросы