Sdscompany.ru

Компьютерный журнал
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Java построение графиков по точкам

Устанавливаем SceneBuilder

В отличие от Swing где можно править код прямо в среде. Для JavaFX надо установить отдельное приложение где можно будет редактировать интерфейс.

Для этого идем сюда https://gluonhq.com/products/scene-builder/#download и скачиваем версию под свою систему.

Там кстати версии под разные java, желательно выбрать соответствующую вашей. Например, у нас в компьютерном классе всюду java 8, следовательно выбираем SceneBuidler под 8 версию.

устанавливаем, кстати 8 версия не требует админских прав, и можно ее ставить прямо на своих компах в компьютерных классах. Кстати у меня вроде дома как 11 джава, но использую я SceneBuilder 8, так что в принципе особого влияния я не заметил. В общем ставим:

по завершению установки SceneBuilder запустится

но он нам пока не нужен, так что можно его закрыть.

Создаем JavaFX приложение

Делаем новый проект типа JavaFX

назову его ExperimentCharts

получаем такую структуру проекта:

Принцип организации javafx интерфейса

Кликнем дважды на файлик sample.fxml чтобы открыть его и увидим там что-то такое:

fxml – это такой аналог java кода для разметки, как видите тут тоже есть всякие импорты. И есть тэги, определяющие что будет отображаться. В настоящий момент тут имеется один тэг GridPane, которые используется для выравнивания разных объектов по сетке.

Так как пока выравнивать нечего он используется тут своего рода в холостую.

Особо стоит обратить внимание на атрибут fx:controller в нем указан класс вместе с полным путем, в котором мы будем писать код для интерфейса.

Давайте теперь запустим приложение. Откроется такое окно:

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

Добавляем кнопку

Вернемся к файлу sample.fxml. Теперь запустим SceneBuidler, выбираем Open Project

и открываем наш файлик. Увидим что-то такое

Перетянем теперь кнопку на форму. Так как пока у нас пустой GridPane наша форма выглядит как пустота. Но тянуть можно:

Сохраним перетянутое Ctrl+S и переключимся обратно в Idea. И глянем что у нас выросло с файлике sample.fxml. Там у нас будет такое:

Тут видно, что выросла наша кнопка. И еще всякие Constraints появились, но на них можно не обращать внимание.

Добавляем реакцию на нажатие

Теперь нам надо добавить реакцию на нажатие кнопки. Переключимся на файл Controller.java, там у нас пока пустота

Этот файл уже привязан к нашему sample.fxml, через атрибут fx:controller=”sample.Controller”. Поэтому мы можем сделать тут какую-нибудь функцию и привязать ее к кнопке.

Добавим функцию, которая выводит сообщение в консоль

запустим теперь приложение и кликнем на кнопку.

очевидно ничего не произойдет. Оно и понятно, ведь мы кнопке функцию не привязали.

Переключимся на SceneBuilder и привяжем кнопку к функции

не забудем сохранить, и запустим проект по-новому

Ура, реакция привязалась.

Читаем значение из текстового поля

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

Я хочу добавить поле для ввода текста, и чтобы по нажатию на кнопку выводилось содержимое этого поля.

Прежде чем добавить элемент в SceneBuilder я создам в классе поле через которое образуется связь

теперь переключимся на SceneBuilder и добавим txtField, плюс привяжем его к нашему классу, делается это путем указания свойства fx:id:

если по какой-то причине у вас в этом поле ничего не высветилось, то можете смело вписать туда вручную txtInput.

Сохраним то что наделали в SceneBuilder и вернемся обратно в Idea. Если глянуть в файлик fxml то увидим

теперь вернемся в наш Controller и подправим метод showMessage:

В принципе вот и вся наука. Добавил поле в контроллер, добавил объект в SceneBuilder. Связал через fx:id, либо связал с методом. Можно теперь пилить что-нибудь посложнее.

Создаем приложение с графиками

Я хочу сделать приложение, которое позволит выводить графики зависимости одних значений эксперимента от других. Например, как увеличение количество продуктов в автомате влияет на количество посетителей, или на количество проданных напитков или еды.

В общем, идем в SceneBuilder и добавляем компоненты.

Мне не очень нравится GridPane так что я хочу заменить его на комбинацию HBox и VBox. Это контейнеры, которые позволяют выводить компоненты в виде строки либо в виде колонки. Комбинируя их можно получить больше свободы чем дает тот же GridPane.

Удаляем кнопки и поля для ввода

так как у формы может быть только один главный контейнер поэтому если мы хотим заменить GridPane на VBox, надо обернуть GridPane в VBox, делается это так:

а затем удаляем GridPane, получим в результате такое:

добавляем Label и ComboBox

кликаем дважды на Label чтобы переименовать его и пишем в нем Y

теперь добавляем график:

Отлично, теперь все сохраняем. И идем в IDEA.

Подключаем интерфейс к коду

Для начала, можно сразу заглянуть в sample.fxml, там будет такое:

сразу обратим на AreaChart

тут видим, что определены две оси. По X и по Y.

  • CategoryAxis – означает что в качестве координат оси X будут использоваться строки.
  • NumberAxis – ясно море, числовая ось.

Так как я собираюсь выводить зависимость одного числа от другого. То я поменяю CategoryAxis на NumberAxis.

Да-да, править разметку можно прямо в файле fxml. Часто, это весьма удобно.

переключаемся в наш Controller, и создаем поля чтобы привязать компоненты на форме к коду.

идем в sample.fxml и там указывем fx:id прямо в коде разметки, вот так

Заполняем ComboBox

По X я буду выводить количество продуктов, а для Y хочу давать возможность выбирать рассчитанный коэффициент из эксперимента.

Соответственно это самый ComboBox, он же выпадающий список надо заполнить возможными значениями.

Для этого в JavaFX предусмотрен интерфейс Initializable, который позволяет определить метод, который будет запускаться при инициализации формы. Делается это так:

правим метод initialize

запускаем main и тыкаем в выпадающий список, он должен быть заполнен

Пробуем вывести график

Для начала не будем сразу выводить данные из файла. Попробуем просто что-нибудь вывести. Сделаем это в методе initialize, чтобы сразу по запуску программы у нас рисовался график.

И так, правим метод initialize

Класс! Кстати там внизу ось подписана нулем, это можно поменять на что-то более осознанное

Подключаем данные экспериментов

Берем файлик с экспериментами из прошлой программы, и копируем себе в корень проекта

вообще, для тестовых целей рекомендую сделать файлик с не очень большим количеством данных, а то будет подтормаживать.

Теперь берем класс эксперимента их прошлой программы и тоже копируем себе.

Важно, чтобы путь к файлу Experiment.java совпадал с путем в исходном проекте, то есть вот так:

так как нас по сути интересуют только данные, можно удалить метод run чтобы не было всяких красных названий, типа

в итоге останется примерно такой класс:

чего вполне достаточно для построения графиков.

Выводим данные на графике

Сделаем так, чтобы данные с графика подкачались в момент загрузки формы, для этого подправим метод initialize

теперь если запустить программу ничего не выведется.

кстати вы возможно заметили, что размер открываемой формы не соответствует размеру формы в SceneBuilder, это потому что в классе main мы явно указываем размеры, давай их уберем:

а если вас раздражает что label с “X” уж как-то сильно зажат в левом верхнем углу, то можете добавить отступы:

не забываем сохранить (Ctrl+S)

Теперь если запустить будет хорошо:

Добавляем реакцию на выбор в ComboBox

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

Читать еще:  Решение слау методом гаусса java

Добавим метод в класс Controller, назовем его updateChart:

привяжем теперь этот метод к реакции на изменение значения в выпадающем списке:

сохраняем (Ctrl+S) и запускаем приложение

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

Оно и понятно, это потому что мы в нашем методе updateChart ни учитываем выбранное значение.

Доработаем наш код.

Сначала я вынесу все названия пунктов в отдельные переменные, мне это пригодится, когда я буду сравнивать значения выбранных пунктов.

теперь подправим метод updateChart, будем смотреть какой пункт меню выбран и в зависимости от него строить выбранную зависимость:

запускаем и проверяем:

Добавляем кластерную гистограмму

Добавим теперь новый график, который будет показывать, как часто встречается то или иное значение. Причем объединит их в группы.

Например, если по ходу эксперимента количество продуктов варьировалось от 10 до 510, то мы сделаем пять групп:

и соответственно получим график на которой будет видно, как много экспериментов попало в ту или иную группу

Правим код Controller

привязываем его к Controller:

не забываем сохранится, и правим метод updateBarChart

хм, а черт! Мы ж забыли вызывать метод updateBarChart, чтобы график рисовался. Добавим вызов его в initialize:

Графика в Java. Graphics

Графический контекст компонентов

Графику в Java обслуживают классы Graphics и Graphics2D.

Работа с графикой осуществляется в графическом контексте элементов, унаследованных от класса Component. Понимать это можно так: на элементах управления, например, JFrame, JPanel, JButton и других, есть возможность рисовать. Такие элементы обладают графическим контекстом, в этом контескте мы и рисуем. Всё, что нарисуем в контексте будет показано на элементе. Классы Graphics и Graphics2D нужны для работы с графическим контекстом. Мы должны получить экземпляр такого класса и, используя его методы, рисовать. Получить экземпляр контекста можно в методе paint:

этот метод наследуется из класса Component. Аргумент Graphics g создаётся системой, а мы берём его в готовом виде и используем для рисования. При создании элемента метод paint будет вызван автоматически.

Начнём изучать работу с графикой в Java с класса Graphics.

Graphics

Рассмотрим простой пример использования методов класса Graphics в Java:

Получаем:

Ниже разбираются все методы, использованные в примере.

Как начертить прямую линию?

Метод drawLine класса Graphics начертит прямую линию:

здесь 20, 30 — это координаты x, y начала линии,
360, 30 — координаты конца линии.

Как задать цвет?

Метод setColor класса Graphics сделает текущим новый цвет:

Аргументы конструктора new Color(0, 0, 255) — это красный, зелёный и синий цвета соответственно (rgb).

Как задать rgb цвета? В примере задан чисто синий цвет, т.к. значения других составляющих равны нулю. Вот чисто красный цвет:

А это чисто зеленый цвет:

Значения составляющих цвета изменяются от 0 до 255.

Светло-синий цвет, который мы использовали для заливки прямоугольника:

Как задать цвет фона?

Задать цвет фона можно методом setBackground:

Как нарисовать прямоугольник?

Методом drawRect класса Graphics:

20, 40 — это координаты верхнего левого угла прямоугольника;
340 — длина;
20 — высота прямоугольника.

Как залить прямоугольник цветом?

Методом fillRect класса Graphics:

Как нарисовать прямоугольник с закругленными углами?

Методом drawRoundRect класса Graphics.

Сопряжение, т.е. закругление на углах, делается с помощью частей овала.

первые 4 аргумента как у обычного прямоугольника. Пятый аргумент — 20 — это ширина прямоугольника, в который вписана часть овала сопряжения. Шестой аргумент — 15 — это высота прямоугольника, в который вписана часть овала сопряжения.

Как нарисовать овал?

Методом drawOval класса Graphics:

Аргументы определяют прямоугольник, в который вписан овал.

Как нарисовать окружность?

Методом drawOval класса Graphics:

Аргументы определяют прямоугольник, в который вписана окружность. Здесь рисуем овал, но длина и высота описанного прямоугольника равны, что и даёт окружность.

Как нарисовать дугу?

Методом drawArc класса Graphics:

первые 4 аргумента как у обычного прямоугольника. Пятый аргумент — 0 — это угол, от которого отсчитывается угол самой дуги. 180 — это угол дуги. Углы отсчитывают от горизонтальной оси: по часовой стрелке отрицательное направление, протв — положительное. В примере 180 градусов (величина дуги) отсчитываем от горизонтальной линии.

Как нарисовать многоугольник?

Методом drawPolygon класса Graphics:

Здесь создаём объект класса Polygon. arrayX — это х-координаты вершин многоугольника, arrayY — это y-координаты вершин многоугольника, 8 — число вершин многоугольника.

Как создать объект точки?

Для этого используем класс Point:

аргументы — это x, y координаты.

Как определить, что точка принадлежит многоугольнику?

Используем метод класса Polygon contains для определения лежит ли точка в многоугольнике.

Как вывести строку?

Методом drawString класса Graphics:

строка «Yes» будет выведена от точки с координатами 50, 190.

Как задать шрифт?

Для этого используем класс Font:

где «Tahoma» — название шрифта,
Font.BOLD|Font.ITALIC — жирный шрифт с наклоном,
40 — высота шрифта.

После задания шрифта мы делаем его текущим и выводим строку этим шрифтом:

Как задать цвет текста?

Чтоб задать цвет текста создадим и установим в графический контекст новый цвет:

Здесь мы создали чисто синий цвет. А теперь выводим строку синим цветом:

Как начертить график?

Как график функции начертить? Сначала начертим координатные оси:

А теперь построить график функции можно просто. Для этого используем метод drawPolyline класса Graphics:

График строим по точкам, xArray – это x-координаты точек, yArray – y-координаты точек графика, nPoint — это число точек.

Наш график являет собой кривую намагничивания. Но почему график такой угловатый (см. картинку выше)? Если взять больше точек, то график будет более плавным.

Java Swing 2D. Введение

Обзор Java 2D API

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

основные классы графического интерфейса

  • Graphics2D (расширение Graphics) — контекст вывода. Определяет текущее графическое состояние, а также методы графического вывода. Для обратной совместимости другие классы в определении своих методов указывают Graphics, хотя реально используют Graphics2D;
  • Color — цвет;
  • Font — шрифт;
  • Point (расширение Point2D) — точка;
  • Rectangle — четырехугольник;
  • Polygon — многоугольник;
  • BasicStroke — контур сложной духмерной фигуры;
  • AffineTransform — матрица преобразования координат;
  • BufferedImage (расширение Image) — изображение, можно использовать также для вне экранного вывода совместо с Graphics2D;
  • TexturePaint — используется для заполнения фигуры текстурой;
  • GradientPaint — используется для градиентного заполнения фигуры.

Цвет реализуется классом Color. В нем также определены статические члены стандартных цветов, как Color.white. Ниже приведен список методов Graphics2D для работы с цветом:

  • getBackground — получить цвет очищения области;
  • setBackground — установить цвет очищения области;
  • clearRect — очистить область;
  • setColor — установить текущий цвет вывода;
  • getColor — получить текущий цвет вывода;

фигуры

Поддерживаются следующие классы фигур:

  • Arc2D — дуга;
  • Area — область, составная фигура (например, четырехугольник минус эллипс);
  • CubicCurve2D — сегмент кубической кривой (сплайн);
  • Ellipse2D — эллипс;
  • QuadCurve2D — сегмент квадратичной кривой (сплайн);
  • Line2D — линия;
  • Rectangle2D — четырехугольник;
  • RoundRectangle2D — четырехугольник с закругленными углами;
  • Rectangle — четырехугольник;
  • Polygon — многоугольник;
  • BasicStroke — контур сложной духмерной фигуры.

Все эти классы реализуют интерфейс Shape:

  • contains — методы определения содержится ли указанная точка или четырехугольник внутри сложной фигуры;
  • intersects — определяет, пересекается ли сложная фигура с четырехугольником;
  • getBounds — возвращает ограничивающий сложную фигуру четырехугольник;
  • getPathIterator — возвращает итератор по сегментам сложной фигуры.
Читать еще:  Java arraylist object

Ниже приведен список методов Graphics2D для вывода фигур. Методы с префиксом draw выводят контур фигуры, а с префиксом fill закрашенную фигуру. Кроме цвета для закраски могут использоваться изображения или цветовые градиенты, реализуемые классами TexturePaint, GradientPaint.

  • draw — сложная фигура;
  • draw3DRect — трехмерный четырехугольник;
  • drawArc — дуга;
  • drawLine — линия, также используется для вывода точки;
  • drawPolyline — вывод последовательности линий;
  • drawOval — овал;
  • drawPolygon — многоугольник;
  • drawRect — четырехугольник;
  • drawRoundRect — четырехугольник с закругленными углами.
  • fill — сложная фигура;
  • fill3DRect — трехмерный четырехугольник;
  • fillArc — дуга;
  • fillOval — овал;
  • fillPolygon — многоугольник;
  • fillRect — четырехугольник;
  • fillRoundRect — четырехугольник с закругленными углами.

текст и изображения

Методы Graphics2D для вывода символов и изображения:

  • drawBytes, drawChars — вывод символов;
  • drawString — вывод строки;
  • drawImage — вывод изображения.

преобразование координат

Методы Graphics2D для преобразование координат:

  • getTransform — получить копию текущей матрицы преобразований;
  • setTransform — установить матрицу преобразований;
  • rotate — добавление вращения к текущей матрице;
  • scale — добавление масштабирования к текущей матрице;
  • shear — добавления скоса к текущей матрице;
  • translate — добавление сдвига к текущей матрице.

область отсечения

Методы Graphics2D для работы с областью отсечения:

  • setClip — установить текущую область отсечения;
  • getClip — получить текущую область отсечения;
  • getClipBounds — получить четырехугольник окружающий область отсечения;
  • clipRect — сделать пересечение с текущией областью отсечения новой областью;
  • clip — сделать пересечение сложной фигуры с текущей областью отсечения новой областью.

интерактивность

Методы Graphics2D для интерактивности с пользователем:

  • hit — есть ли пересечение между фигурой и четырехугольником;
  • hitClip — есть ли пересечение между областью отсечения и четырехугольником;
  • дополнительно см. методы интерфейса Shape.

Пример вывода графики с помощью Swing 2D

Контекст вывода Graphics или Graphics2D забирает много системных ресурсов. Поэтому если вы их создаете явно из другого Graphics, компонента, BufferedImage и т.п. (обычно это метод getGraphics), то рекомендуется освободить ресурсы явно вызовом метода dispose.

Для вывода пользовательской графики обычно создается отдельный элемент управления, который затем размещается на главное окно. В нем перегружается метод paintComponent для Swing элементов, или методы paint и update для awt элементов.
В этих случаях ресурсы контекста вывода освобождаются автоматически.

Для сохранения родительского облика в методе можно сделать вызов super.paintComponent(g);. И далее дорисовать поверх. Для примера в нижеследующем коде замените JComponent на JButton и удалите очищение фона.

Работа с изображениями в Swing 2D

Изображения в java описываются классом BufferedImage, который объединяет в себе объект растровых данных Raster и объект цветовой модели ColorModel.

В свою очередь объект растровых данных состоит из объекта DataBuffer, содержащего
четырехугольный массив значений пикселей, и объекта SampleModel, описывающего организацию данных в массиве: число банков в DataBuffer, ширину и высоту изображения, тип значений в DataBuffer (например, TYPE_INT).

Объект ColorModel нужен для преобразования данных пикселя в значения составляющих цвета.

вывод в изображение

Для вывода в изображение всего лишь надо получить контекст вывода изображения. Например, в следующем коде создается изображение белого многоугольника на сиреневом фоне.

вывод изображения

Для вывода изображения в объекте контекста вывода Graphics2d есть несколько методов. Для краткости я опущу типы аргументов:

  • drawImage(img, x, y, observer)
  • drawImage(img, x, y, bgcolor,observer)
  • drawImage(img, x, y, width, height, bgcolor, observer)
  • drawImage(img, x, y, width, height, observer)
  • drawImage(img, dx1, dy1, dx2, dy2, sx1, sy1, sx2, sy2, bgcolor, observer)
  • drawImage(img, dx1, dy1, dx2, dy2, sx1, sy1, sx2, sy2, observer)

Первый аргумент везде само изображение.

x, y, width, height — четырехугольная область вывода.

dx1, dy1, dx2, dy2 — координаты четырехугольной области вывода.

sx1, sy1, sx2, sy2 — координаты четырехугольной части изображения, которая будет выведена.

В качестве значения аргумента observer можно указывать null. Данный аргумент нужен только при асинхронной работе с изображением.

bgcolor — цвет заднего фона для прозрачных частей изображения.

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

Графические форматы файлов.

Для манипуляций с графическими файлами в Java определен класс ImageIO.
При чтении ImageIO сам определяет формат файла. Список поддерживаемых форматов зависит от реализации Java, однако гарантируется поддержка jpeg, png, gif, bmp и wbmp. Список поддерживаемых форматов можно получить вызовом ImageIO.getWriterFormatNames()

Для теста создадим компонент, который при создании будет загружать изображение с диска, тут же его запишет обратно на диск в другом формате. А само изображение будет использоваться для оформления компонента.

Красивый JS график на сайт: лёгкая библиотека для ваших проектов

Для одного сайта было необходимо создать интерактивный график. Нет ничего проще! Однако исходный дизайн представлял собой богатый набор кривых, градиентов и теней. При этом нужно было найти лёгкое решение, с возможностью гибкого управления внешним видом. Для этой задачи я перебрал несколько готовых библиотек:

Если вы уже имели с ними дело, нет необходимости в их представлении. Библиотеки позволяют создавать фантастические диаграммы со сложными анимациями, выборками, вариантами оформления. Однако, для поставленной задачи они имели один недостаток: большой вес. В случае пары графиков не было смысла тащить тяжеловесную библиотеку.

В этой статье хочу представить вашему вниманию простенькую библиотеку для создания вот таких линейных графиков. Вес библиотеки получился сравнительно небольшим: всего 18 kB в сжатом состоянии. Данная библиотека основана на оригинальном скрипте dopyo. На всякий случай приведу ссылку dopyo.js

В библиотеке liteChart я постарался убрать повторяющийся код (скрипт стал легче), добавил градиенты, заливки, улучшил визуальное отображение и ещё кое-что по мелочам. Вот что получилось:

Пример графика

Если вам необходимо ещё более простое решение, рекомендую воспользоваться онлайн сервисом для создания графика. Вам не понадобится подключать дополнительные скрипты. Просто введите данные, получите код диаграммы и вставьте на свой сайт. Профит! А кому нужно более гибкое управление, читайте дальше.

Лёгкий старт

Шаг 1:

Скачайте библиотеку и подключите её к своему проекту:

Не имеет значения где вы её подключите, но лучше, если в «подвале» страницы. Думаю, нет смысла объяснять почему.

Шаг 2:

Создайте контейнер, где будет выводиться график и задайте ему уникальный идентификатор:

Шаг 3:

Заполняем график и вставляем его в контейнер:

Функция-конструктор liteChart принимает 2 параметра:

id (String) — обязательный
Уникальный идентификатор графика

settings (Object)
Объект содержащий данные о настройках графика. В приведённом выше примере параметр settings пустой, а значит используются настройки по умолчанию, — предустановленные.

Настройки графика

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

Анимация animate

show (true/false)
Включить или выключить анимацию.
По умолчанию: true

duration (число)
Продолжительность анимации в секундах.
По умолчанию: 0.5

Оси координат axisX и axisY

show (true/false)
Показывать или отключить ось координаты.
По умолчанию: true

color (String)
Задаёт цвет оси координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: #e9edf1

width (число)
Толщина оси координат в пикселах.
По умолчанию: 2

value (String)
Дополнительная подпись к значениям оси координат.
По умолчанию: null

minValue (число)
Минимальная величина оси координаты. Если значения values передаваемые в метод addLegend меньше установленного значения minValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

maxValue (число)
Максимальная величина оси координаты. Если значения values передаваемые в метод addLegend больше установленного значения maxValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

Смещение графика по eventCoord

x и y (число)
Смещение графика по осям x и y.
По умолчанию: 0

Заполнение поля диаграммы fill

fill (null, «origin» или «gradient»)
Задаёт способ заполнения поля диаграммы. Выбирается одно из 3 значений: null — без заполнения, «origin» — сплошная заливка, «gradient» — градиентная заливка.
По умолчанию: «gradient»

Сетка координат gridX и gridY

show (true/false)
Показывать или отключить сетку координат.
По умолчанию: true

interval (число)
Не описано…
По умолчанию: 0

fill (число)
Не описано…
По умолчанию: 1

stroke (String)
Задаёт цвет линий сетки координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#e9edf1»

width (число)
Задаёт толщину линий сетки координат.
По умолчанию: 2

dasharray (число/строка)
Управляет видом пунктирной обводки линий сетки координат.
По умолчанию: «0 10.04»

linecap (строка)
Свойство определяет как будут выглядеть концы линий сетки координат. Возможные значения: butt, round, square.
По умолчанию: «round»

Подписи к осям координат labels

show (true/false)
Показывать или отключить подписи к осям координат.
По умолчанию: true

fontColor (string)
Цвет подписей. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#c5c6d0»

fontSize (число)
Размер шрифта подписей.
По умолчанию: 12

fontFamily (string)
Шрифт подписей.
По умолчанию: «sans-serif»

fontWeight (string)
Толщина шрифта.
По умолчанию: «normal»

Настройки линий графика line

width (число)
Толщина линий графика.
По умолчанию: 3

style (string)
Тип линий графика. Одно из 2 значений: curve — изогнутые линии, straight — прямые линии.
По умолчанию: «curve»

shadow (true/false)
Отображать или скрыть тень от линии.
По умолчанию: true

dasharray (число/string)
Управляет видом пунктирной обводки линий графика.
По умолчанию: null

Настройки точек графика point

show (true/false)
Показывать или отключить точки.
По умолчанию: true

radius (число)
Величина радиуса точки.
По умолчанию: 5

strokeWidth (число)
Толщина обводки точки.
По умолчанию: 5

stroke (string)
Цвет обводки точки. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#ffffff»

Значения valueOnliteChart

show (true/false)
Отображать или скрыть значения над точками графика.
По умолчанию: false

Примеры

#1 График без кастомных настроек

Наш график будет выглядеть примерно так:

Читать еще:  Java lang illegalargumentexception malformed

Пример графика по умолчанию

#2 Прямые линии с подписями по осям

#3 График со сплошной заливкой

Послесловие

Если вы разбираетесь в CSS, вы можете добавить анимации к линиям или изменить оформление графиков под свои потребности. Многие элементы имеют css классы и вы легко можете управлять внешним видом.

Библиотека JFreeChart

Проект JFreeChart был основан в феврале 2000 года Дэвидом Гилбертом. Сегодня библиотека JFreeChart широко используется в Java приложениях для создания широкого спектра графиков. Используя JFreeChart можно создавать все основные типы 2D и 3D графики : круговые диаграммы, гистограммы, линейные и временные диаграммы. Библиотека позволяет создавать изображения нескольких форматов типа PNG, JPEG, SVG (Scalable Vector Graphics) и т.д.

JFreeChart обеспечена хорошо документированным API, поставляется с открытым исходным кодом и бесплатно. Это позволяет использовать ее в коммерческих целях без каких-либо дополнительных затрат. Документированное описание API можно найти на официальном сайте http://www.jfree.org/jfreechart/api/javadoc.

Дистрибутив JFreeChart

Дистрибутив библиотеки JFreeChart поставляется в виде zip файла и включает maven проект с документацией и демонстрационными примерами. Скачать последнюю версию библиотеки JFreeChart можно с официального сайта http://www.jfree.org/jfreechart/download.html.

Загрузка JFreeChart в maven репозиторий

Артефакт JFreeChart версии 1.0.19 можно найти в репозитории mvnrepository по следующим GAV параметрам :

Чтобы загрузить библиотеку/артефакт в локальный репозиторий .m2/repository можно использовать плагин dependency с целью (goal) get следующим образом :

Примечание : в среде разработки Eclipse библиотеку JFreeChart можно установить как «User Library» и подключать к проектам.

Архитектура библиотеки JFreeChart

На следующем рисунке представлена схема взаимодействия различных классов библиотеки JFreeChart.

Подключение библиотеки JFreeChart к приложению

Архитектура прикладного уровня, представленная на следующем рисунке, объясняет, как библиотеку JFreeChart можно подключить к Java приложению.

Программа читает данные на основе которых с использованием JFreeChart API формирует требуемое изображение, которое можно будет либо отобразить в интерфейсе приложения (например Swing приложение), либо сформировать изображение типа JPEG или PNG.

Настройка диаграмм JFreeChart

Структура библиотеки JFreeChart создана таким образом, чтобы можно было статически и динамически настраивать общий вид диаграммы и графическое представление данных. Подробное описание свойств диаграммы JFreeChart представлено здесь. Примеры использования JFreeChart в сервлетах наглядно демонстрируют возможности изменения внешнего вида диаграммы изменением отдельных свойств.

Примеры построения диаграмм JFreeChart

Рассмотрим примеры создания 3-х графических изображений JFreeChart : круговая диаграмма (PieChartDemo.java), гистограмма (BarChartDemo.java) и временная диаграмма (TimeSeriesChartDemo.java). Для этого нам необходимо :

  1. Подготовить наборы данных для построения графиков.
  2. Создать графические объекты типа JFreeChart.
  3. Отобразить графические объекты JFreeChart на экране.

Наборы данных для построения графиков

Основой наборов данных для создания различных графических изображений типа круговых диаграмм и гистограмм является класс AbstractDataset. Данный класс является родителем DefaultPieDataset, используемый для формирования круговых диаграмм, и DefaultCategoryDataset для построения гистограмм. Для построения временной диаграммы используется набор данных TimeSeries и коллекция TimeSeriesCollection, реализующая интерфейс XYDataset.

Набор данных для круговой диаграммы

Метод createDataset формирует набор данных типа PieDataset для создания круговой диаграммы.

Метод определения значения setValue получает числовое значение value для ключа key, имеющего тип Comparable.

Набор данных для гистограммы

Метод createDataset формирует набор данных типа CategoryDataset для создания гистограммы.

Метод addValue получает в качестве параметров вещественное значение value для строки rowKey и колонки columnKey, имеющих тип Comparable.

Набор данных для графика

Метод createDataset формирует набор данных типа XYDataset для создания линейных XY графиков. Сначала создаются два объекта TimeSeries, которые подготавливают наборы данных. После этого воздаются коллекции TimeSeriesCollection, реализующие интерфейсы XYDataset, IntervalXYDataset, XYDomainInfo, XYRangeInfo.

Создание изображений графических объектов JFreeChart

Для построения различных графиков JFreeChart (гистограммы, круговые диаграммы, линейные графики) используется ChartFactory, содержащий большое количество статических перегруженных методов.

Графическое изображение круговой диаграммы

Для создания круговой диаграммы используем метод createPieChart, которому в качестве параметров передаем наименование заголовка, набор данных, флаги создания легенды, всплывающей подсказки и отображения URL. После этого определяем фон графика, выравнивание, цвет и шрифт заголовка и подзаголовка. При настройке plot’a. определяем цвет и наименования секций, шрифт меток секций.

Подробное описание с примерами настройки интерфейса круговых диаграмм представлено здесь.

Графическое изображение гистограммы

Для создания гистограммы используется метод createBarChart, которому в качестве параметров передаются наименование заголовка, наименование вертикальной оси и набор данных. После этого определяется подзаголовок, фон графика и настраивается plot.

Описание с примерами настройки интерфейса гистограмм представлено здесь.

Временные диаграммы

Для создания временных диаграмм используется метод createTimeSeriesChart, которому в качестве параметров передаются наименования заголовка, осей абсцисс и ординат, набор данных и флаги представления легенды, отображения всплывающей подсказки, отображения адреса URL. Графики будут отображаться на белом фоне. После этого определяются параметры plot’а типа XYPlot.

Временная шкала (ось абсцисс) будет иметь метки в формате «mm.yyyy». Формат временных меток может быть изменен.

Описание с примерами создания и настройки временных диаграмм, а также нанесений аннотаций и маркеров на графики, представлено здесь.

Отображение графических объектов в интерфейсе

Для отображения графических объектов в интерфейсе Swing-приложений создаем объект ChartPanel.

Графические изображения в интерфейсе

Панель представления графических объектов ChartPanel

ChartPanel наследует (extends) свойства Swing GUI класса JPanel и предназначена для отображения графических объектов JFreeChart. Класс содержит несколько конструкторов, которые в качестве основного параметра получают объект JFreeChart.

Создаваемое графическое изображение отображается на панели и автоматически перерисовывается при получении соответствующих уведомлений.

Ссылка на основную публикацию
Adblock
detector