Статьи

Как быстро и просто интегрировать Open Flash Chart в Struts 2

Март 15, 2018

Open Flash Chart — это бесплатная библиотека Flash-карт с открытым исходным кодом. Он позволяет генерировать диаграммы во Flash из данных на разных языках, включая PHP, Perl, Python и Java, а также из простого текстового файла. В ответ Марк Эшворт создал проект https://connext-graphs.dev.java.net/ , который упрощает интеграцию Open Flash Chart в приложения Struts 2. Здесь Марк дает интервью о последних выпусках и разработках проекта Connext-Graphs.

Библиотека Connext-Graphs — это плагин для Struts 2, который позволяет легко включать библиотеку Open Flash Chart в ваши веб-приложения. Недавно анонсированная версия 0.6 включает в себя эскизную диаграмму, которая была недавно добавлена ​​в Open Flash Chart.

Марк, во-первых, не могли бы вы рассказать нам немного о себе?

Я живу и работаю в Йоханнесбурге, Южная Африка. Я занимаюсь разработкой приложений последние 12 лет или около того, начиная с темных дней с Microsoft Visual Basic 6.0 и заканчивая знакомством с Java, используя печально известную IBM VisualAge For Java IDE (очень понравилось).

В основном я работаю старшим Java-разработчиком, который специализируется, работает, интересуется и экспериментирует со следующим:

  • JBoss 4.0.4
  • Netbeans 6.0 RCP
  • Android
  • Java ME
  • SQL Server 2005
  • db4o
  • или что-нибудь интересное …

И можете ли вы рассказать нам что-нибудь об истории вашего проекта?

Проект был начат, потому что я хотел использовать библиотеку диаграмм, которая была похожа на диаграммы Google в их приложении Analyzer. В Struts 2.0 есть плагин для библиотеки JFreeChart, но я хотел диаграмму, с которой пользователь мог бы взаимодействовать. Когда пользователь наводит курсор на точку диаграммы, отображаются свойства этой точки:

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

Какие основные функции вы сделали доступными?

Основные характеристики заключаются в следующем:

  • Написан как плагин Struts 2.0, поэтому инициализация объекта Flash выполняется.
  • При создании данных диаграммы используются объекты Java для моделирования различных аспектов диаграммы.
  • Стиль настраивается с помощью данных, отправляемых на диаграмму.
  • Некоторые аспекты диаграммы можно стилизовать с помощью CSS.

Можете ли вы показать нам пример одного из этих графиков?

Конечно. Вот «эскизная таблица»:

Эскизная диаграмма основана на гистограмме, но имеет дополнительную «забавную » опцию, которая показывает, насколько интересно визуализировать диаграмму.

Прохладно! Пожалуйста, проведите нас через создание таблицы выше!

ХОРОШО. Вот так:

  1. Создайте контроллер диаграммы, который задает свойства области диаграммы: 
    OFCGraphController controller = new OFCGraphController();
    controller.getTitle().setText("Example Sketch Bar Chart");
    controller.getTitle().setSize(12);
    controller.getLabels().setLabels(Arrays.asList(labels));
    controller.getYLegend().setText("No. of tasks");
    controller.getYLegend().setColor("#8b0000");
    controller.getYLegend().setSize(12);
    controller.getXLegend().setText("Months");
    controller.getXLegend().setColor("#8b0000");
    controller.getXLegend().setSize(12);
    controller.getColor().getBgColor().setColor("#FFFFFF");
    controller.getColor().getXAxisColor().setColor("#e3e3e3");
    controller.getColor().getYAxisColor().setColor("#e3e3e3");
    controller.getColor().getXGridColor().setColor("#e3e3e3");
    controller.getColor().getYGridColor().setColor("#e3e3e3");
     
  2. Создайте ряд данных диаграммы. Можно смешивать и сочетать разные типы серий, чтобы вы могли объединить линейный график и эскизный график. 
    DefaultOFCGraphDataModel model = new DefaultOFCGraphDataModel();
    model.setData(Arrays.asList(data01));
    model.setFormat(new DecimalFormat("###0.000"));
    model.setSeriesType(new OFCBarSketchSeriesType(55, 10, "#d070ac", "#000000", "Test", 10));

    Параметр смещения OFCBarSketchSeriesType (альфа, смещение, цвет, outlineColor, текст, размер) определяет «интересный» аспект диаграммы. Можно использовать следующие значения: 0 — 3 скучно, 4 — 6 весело, 7 — интересно.

    Fun фактор 2:

    Интересный фактор 5:

    Fun фактор 10:

    Fun фактор 15:

  3. Добавьте серию в область построения диаграммы: 
    controller.add(model);

  4. Визуализируйте данные диаграммы: 
    value = controller.render();

    Здесь строка данных, используемая Open Flash Chart, присваивается свойству value, и это свойство читается представлением graph.jsp.

    <%@ include file="include.jsp" %>
    <s:property value="value" escape="false" />


  5. Включите компонент Flash. Конечно, ничего из этого не будет работать, если объект Open Flash Chart не будет встроен в представление Struts. Следующие теги объявляют библиотеку тегов connectxt-графов, создают объект Flash и связывают данные из представления данных, определенного на предыдущих шагах: 
    <%@ taglib prefix="m" uri="/connext" %>

    <m:graph id="graph" 
    		width="400" 
    		height="400" 
    		align="middle" 
    		bgcolor="#FFFFFF" 
    		url="/Graph_exampleSketch.html">

 

Предоставляет ли проект образцы?

Репозиторий SVN имеет два проекта в багажнике:

  • Connext-Graphs: это фактический плагин Struts 2.0
  • graph-web: это простая демонстрация некоторых доступных графиков.

Оба проекта используют Maven2, но они не развернуты ни в каком публичном хранилище. Если вы пытаетесь создать только проект graph-web, то, к сожалению, вам нужно сначала выполнить установку mvn в проекте connext-graphs, а затем попытаться построить проект graphs-web.

Обратите внимание, что в дополнение к эскизной диаграмме, рассмотренной выше, образец также показывает следующие два:

Наконец, какие улучшения вы планируете внедрить?

  • Реализуйте круговые диаграммы.
  • Удалите ссылку на сайт Open Flash Chart, потому что диаграмма делает это.
  • Небольшие исправления и улучшения.

 

 

34
Share: