BarChart составляющие

BarChart составляющие

  четверг, апреля 30, 2015    Quasar

---

В javafx есть множество стандартных графиков, где за пару строчек кода можно отобразить данные в желаемом виде. Но однажды всё же понадобилось разобраться в внутренним устройством компонента BarChart дабы подредактировать под свои нужды.
Упрощенная схема компонентов BarChart с цсс классами:

Scheme BarChart

Возьму простой график

И посмотрю что внутри поиском всех дочерних элементов элеменов

barChart.lookupAll("*").forEach(node -> {
System.out.println(node);
});

Выводит такой список

 BarChart[id=barChart, styleClass=chart bar-chart]
Label@66fce22e[styleClass=label chart-title]'Sale Statistic'
Chart$1@10bcc98f[styleClass=chart-content]
Region@fff27fa[styleClass=chart-plot-background]
XYChart$1@c5bee6e
Path[elements=[], fill=null, fillRule=NON_ZERO, stroke=0x000000ff, strokeWidth=1.0]
Path[elements=[], fill=null, fillRule=NON_ZERO, stroke=0x000000ff, strokeWidth=1.0]
Path[elements=[], fill=null, fillRule=NON_ZERO, stroke=0x000000ff, strokeWidth=1.0]
Path[elements=[], fill=null, fillRule=NON_ZERO, stroke=0x000000ff, strokeWidth=1.0]
Line[startX=0.0, startY=0.0, endX=0.0, endY=0.0, stroke=0x000000ff, strokeWidth=1.0]
Line[startX=0.0, startY=0.0, endX=0.0, endY=0.0, stroke=0x000000ff, strokeWidth=1.0]
Group@21f926d3[styleClass=plot-content]
StackPane@78a6a82d[styleClass=chart-bar series0 data0 default-color0]
StackPane@52792101[styleClass=chart-bar series0 data1 default-color0]
CategoryAxis[id=axisX, styleClass=axis]
Label@538c682d[styleClass=label axis-label]'Sale'
Path[elements=[], fill=null, fillRule=NON_ZERO, stroke=0x000000ff, strokeWidth=1.0]
NumberAxis[id=axisY, styleClass=axis]
Label@5854dcc4[styleClass=label axis-label]''
Path[elements=[], fill=null, fillRule=NON_ZERO, stroke=0x000000ff, strokeWidth=1.0]
Path[elements=[], fill=null, fillRule=NON_ZERO, stroke=0x000000ff, strokeWidth=1.0]
Legend@5368a861[styleClass=chart-legend]
Label@26ccb370[styleClass=label chart-legend-item]'Sale items'

Напишу для примера маленькое приложение в котором берутся по css классу элементы и окрашиваются в рандомный цвет.
Интересуют прежде всего контейнеры, сами столбики, оси координат, это цсс классы выделенные в списке выше. Выцепляя по одному и окрашивая в разные цвета, можно понять что где находится.
Вот что получилось. Например первый элемент в списке выше - это контейнер BarChart[id=barChart, styleClass=chart bar-chart], он содержит все прочие элементы. Выдерну по цсс классам .chart.bar-chart:

.bar-chart example

 Далее, .chart-content
   

.chart-content

уже не содержит легенду и название графика, но содержит оси координат.

Далее, сам график, без осей, .chart-plot-background:

.chart-plot-background

Таким образом можно по очереди выдергивать все интересующие компоненты.
Инересно дело обстоит с .plot-content, это группа содержит столбцы графика:

.plot-content

но не содержит квадратик легенды. А вот по классу .chart-bar можно выдернуть все три элемента. Столбцы на графике это объекты класса StackPane, а элемент легенды - Region.

.chart-bar

  Остальное аналогично, все элементы:

All elements

JDK 8
Ubuntu
Svn

Статья о стилях Chart