CFML

Введение в "charting and graphing" в CFMX.

Обзор тега <cfchart>

Для создания динамических диаграмм в CFMX используют 3 тега: cfchart, cfchartseries и cfchartdata.

Тег cfchart можно представить как главный, определяющий инфорацию о контейнере, в котором размещается диаграмма. Он определяет размер диаграммы, цвет, информацию об осях "х" и "y" и т.п.

Внутри контейнера, описанного тегов cfchart, мы располагаем любое количество серий данных. Это наборы чисел, которые должны быть изображены графически. Например, одни серии могут изображать уровень продаж компании по месяцам за данный календарный год, а другие серии в этом же графике могут отображать те же данные, но за предыдущий год. Каждая из этих серий определяется тегом cfchartseries.

Данные, поступающие в серии, могут быть двух видов:

Данные запроса, предварительно созданного тегом cfquery;
Явно указанные данные с помощью тега cfchartdata.

Итак, с помощью этих трех тегов простая диаграмма будет выглядеть так: Даже без указания атрибутов можно увидеть основную структуру диаграммы:

График содержит 2 серии;
Первая серия содержит данные из запроса;
Вторая серия содержит явно указанные данные.

Создаем простую диаграмму

Используя примерное приложение, поставляемое вместе с CFMX, мы сможем создать диаграмму, которая будет показывать данные о компании за последние 3 года.

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

Конечно, в полученной диаграмме присутствует несколько недостатков:

По оси "y" отображаются "странные" значения (3.333, 4.667 и т.п.);
Столбик с самым большим значением упирается в верхнюю часть диаграммы;
Нет обозначений, поясняющих, что означают оси "x" и "y".

Чтобы график выглядел лучше, следует применить к тегу cfchart несколько атрибутов:

xAxisTitle="Department"
yAxisTitle="New Hires"
scaleFrom="0"
scaleTo="8"
gridlines="5"

Теперь код для создания диаграммы выглядит так: Получаем следующий график:

Тег cfchart содержит 33 атрибута, поэтому есть смысл обратиться к документации для боле подробного их изучения.

Добавляем серии

Вторая серия нашей диаграммы будет содержать ту же информацию, но за 2001 год. Для получения этой информации создаем еще один запрос:

И код графика с добавленной серией будет выглядеть так: В результате получаем график:

Каждая серия имеет свой цвет и в верхней части графика отображено пояснение каждого цвета. Также слудет заметить, что если навести мышь на какой-либо столбик диаграммы, то мы увидим всплывающее пояснение. Такая всплывающая "подсказка" можетбыть включена/выключена атрибутом tipstyle в теге cfchart.

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

Весь код с добавленной третьей серией будет выглядеть так:

В результате получаем такую диаграмму:

Заметьте, что в этой третьей серии мы заменили значение атрибута type с "bar" на "line". В CFMX диаграммы могут одновременно отображать разные типы графиков (исключение составляет диаграмма "пирог", в которой можно отображать только один тип графика). Серии размещаются на диаграмме в той же последовательности, в которой были указаны внутри тега cfchart.

Например, если бы эту диаграмму отобразить в 3D формате (атрибут show3d="yes" в теге cfchart), то серии 2002 года будут на переднем плане, 2003 - на заднем, а 2001- между ними. Если вы хотите расположить данные за 2003 год на переднем плане, то просто укажите нужную серию в начале контейнера тега cfchart.

И в заключении стоит отметить особенность отображения русского текста внутри диаграмм. Если вы хотите указывать в атрибутах xaxistitle, yaxistitle, serieslabel, item пояснения на русском языке, то предварительно следует использовать шрифт ArialUnicodeMS: Этот шрифт не нужно искать где-то и устанавливать в системе, т.к. он уже есть в ColdFusion MX. Тем не менее, в диаграммах типа flash русский текст отображается в виде ??????????. Для решения этой проблемы следует самому создавать пояснения возле диаграммы.

По материалам: Basic charting and graphing with ColdFusion MX