Графики (chart) в Showcase

Материал из Course Orchestra
Перейти к: навигация, поиск
Showcase

Создание решений на КУРС:Showcase

Описание

Интерфейс хранимой процедуры:

CREATE PROC 
	@main_context varchar(MAX)='',
	@add_context varchar(MAX)='',
	@filterinfo xml='',
        @session_context xml='',
        @element_Id varchar(MAX)='',
	@chartsettings xml ='' output

Структура chartsettings

См схему chartsettings.xsd и chartProperties.xsd

<chartsettings>
<!-- Тут описываются кнопки фильтров, которые находятся над гридом. Только фильтр по тексту. Не реализовано-->
    <filters>
        <filter id="код фильтра" caption="наименование фильтра" type="text" query="SQL-запрос для фильтрации">
        <filter ...>
    </filters>
    <labels>
	<header>некий html-текст</header>
        <footer>некий html-текст</footer>
    </labels>
    <action>
	default action
    </action>
    <properties legend="right" selectorColumn="name"  width="" height="" flip="false" 
hintFormat="%x (%labelx): %value" fireGeneralAndConcreteEvents="true"/>
    <labelsY>
         <labelY value="10" text="мало"/>
         <labelY value="100" text="много"/>
         ...
    </labelsY>
    <template>json файл с параметрами</template>
</chartsettings>

Для того, чтобы получить json файл с параметрами необходимо ввести в браузере (адрес Showcase)/js/course/gui.html, ввести необходимые настройки и нажать кнопку Export.

  • Параметр flip отвечает за способ интерпретации передаваемых данных: если flip = false, то значения каждой серии передаются в отдельной строке, названия столбцов - это подписи по оси x, а содержимое столбца с именем selectorColumn - названия серий. Если же flip = true, то полученные данные нужно транспонировать - данные серий передаются в столбцах, в столбце selectorColumn содержатся подписи по оси x, а названия столбцов - это названия серий. Сейчас режим flip=true корректно (!) работает только если не заданы события для графика, т.к. в данном режиме строку с событиями (содержащую XML текст) невозможно задать для числовых столбцов с данными.
  • Параметр legend отвечает за расположение легенды.
  • Параметр fireGeneralAndConcreteEvents указывает на то, что при клике по значению нужно выполнять общее событие для серии и конкретное для значения при клике по значению (при наличии обоих событий, естественно). События выполняются асинхронно, но первым начинает выполняться событие для серии.
  • Для графика может быть задан либо набор подписей labelsY, либо функция labelYfunc в шаблоне для замены одной или нескольких подписей по оси Y.
  • hintFormat - задает общий формат подсказки для всех точек графика. Может содержать 6 шаблонов:

|%x |значение x | |%labelY |подпись по y (если она задана для конкретного значения)| |%labelX |подпись по x | |%value |значение | |%seriesName|Наименование серии| |%maxX|максимальное значение X|

Для того чтобы получить json-файл с параметрами графика, нужно в web-браузере открыть файл webapps\%webappname%\gui.html, ввести необходимые настройки и нажать кнопку Export. Полученный json-код отобразится в модальном окне. Этот код нужно скопировать в буфер обмена и вставить в chartsettings внутри тэга <template>.

При этом если в dataset есть столбец с названием ~~properties или строка со значением ~~properties в selectorColumn, то этот столбец (строка) не отображается в таблице, а в нем может находиться код XML с информацией о действиях при двух различных событиях в графике, а также о настройках серий, следующего вида:

<properties>
	<color value="#FFFFFF">
	<event name="value_single_click" x="1">
		<action/>
	</event>
	<event name="series_single_click">
		<action/>
	</event>
</properties>

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

Шаблон для графика можно создать в специальной компоненте для настройки шаблонов, доступной по адресу: http://server:port/Showcase/js/course/gui.html. Список возможных типов графиков, общих настроек графика и настроек для осей графика можно посмотреть в данной компоненте. Генерируемый данной компонентой код можно вставлять в хранимую процедуру.

Типовой шаблон процедуры

declare @filters as varchar(1024)
declare @whereclause as varchar(1024)
set @filters = текст, который сцепляет наименование полей со значением фильтров
set @whereclause='where 1=1 and (' + main_context + ' and ' + addd_context + ' and ' + @filters + ')'

EXEC 'Запрос' + @whereclause + @orderbyclause
set @chartsettings = 'настройка отображения'

Запрос возвращает таблицу с данными для построения графика.

Интерфейс JS функции отрисовки графика (для программистов)

Примечания:

  • Параметр "Расположение легенды" задается расположением компонент gwt.
  • JS функция отрисовывает chart программно (не декларативно).

Для отрисовки графика следует вызвать функцию course.charting.makeChart. Функция принимает параметры в двух вариантах:

  1. course.charting.makeChart(/*Object | JSONString*/chartOptions)
  2. course.charting.makeChart(param1, param2, param3, param4, …, /*Function*/convertorFunc)

Функция convertorFunc принимает параметры: param1, param2, param3, param4, …, и должна возвратить объект chartOptions.

В проекте Showcase будет использоваться второй вариант в таком виде: course.charting.makeChart(/*Object | JSONString*/optionSet1, /*Object | JSONString*/optionSet2, convertorFunc) Функция convertorFunc уже написана. Параметр optionSet1 генерируется динамически на основе данных из БД. Параметр optionSet2 содержит заранее сохраненные настройки графика. Параметр optionsSet1 содержит атрибуты, как указано в следующем примере:

{
    width: 400, // вынуждены ширину задавать здесь, а не в стиле для div
    height: 400, // вынуждены высоту задавать здесь, а не в стиле для div
    series: [
        {name: "Series A", data: [ -2, 1.1, 1.2, 1.3, 1.4, 1.5, -1.6 ] , 
             options: {fill: "yellow", stroke: {width: 2, color: "#f80"}, legend: "Some legend"}},
        {name: "Series B", data: [ 1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1 ]  },
        {name: "Series C", data: [ 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 ] }
    ],
    labelsX: [ // необязательный атрибут
        {value: 1, text:"dd"}, {value: 4, text: "dsd"}
    ],
    labelsY: [ // необязательный атрибут
        {value: 1, text:"zero"}, {value: 3, text: "five"}
    ]
};

Атрибут options не является обязательным. Если атрибут options все-таки присутствует, то его объект может содержать следующие атрибуты: fill - цвет серии stroke: {width: 2, color: "blue"} - свойства линии legend: что будет подписано в легенде для рассматриваемой серии. Как формируется легенда - см. ниже

Если (fill == null) - то используется раскраска из шаблона по умолчанию. Если нужно отобразить:

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

то массив data должен состоять из следующих объектов:

    series: [
        {name: "Series A", data: [ 
             {y: -2, tooltip: "Tooltip 1", legend: "Text 1", fill: "yellow", stroke: {width: 2, color: "#f80"}}, 
             {y:1.1, tooltip: "Tooltip 2", legend: "Text 2", text: "Some text"},
             
    ],

Атрибут "legend" используется только для круговой диаграммы. Он содержит подпись для легенды круговой диаграммы. Атрибут "text" также используется только для круговой диаграммы. Он содержит подпись для соответствующего сектора диаграммы.

Легенда задается следующим образом:

  • Для всех диаграмм, кроме круговой – если в options есть атрибут legend, то он относится к рассматриваемой серии;
  • Для круговой диаграммы – в качестве легенды будет взят один из атрибутов сектора в следующем порядке: «legend», «text», «y».

Параметр optionSet2 будет задаваться с помощью специального веб-приложения для настройки графиков. Этот параметр содержит атрибуты как указано в примере:

{
  "legend": {
	"selectable": true
  },
    plot: {name: "default", options:  {type: "StackedColumns", tension:"S", markers: true} }, // может быть массивом
    axisX: {fixLower: "major", fixUpper: "major", majorTickStep:2, labelFunc: "labelFuncString"},
    axisY: {vertical: true, fixLower: "major", fixUpper: "minor", labelFunc: "labelFuncString"},
    theme: "dojox.charting.themes.ThreeD", // необязательный аттрибут
    action: [ // необязательный аттрибут
        {type: "dojox.charting.action2d.Shake", options: {duration: 500, easing: "dojo.fx.easing.bounceOut"}},
        {type: "dojox.charting.action2d.Tooltip"}
    ],
    eventHandler: "eventCallbackChartHandler"
};

Опция legend.selectable, которая появилась начиная с версии 2.0.4, позволяет включать и выключать отдельные серии на графике.

В качестве параметра labelFunc могут выступать:

  • Название функции, определенной, например, в файле showcase.js (в файл помещаются общеупотребительные функции, например, отображение в процентах);
  • Код функции в виде: function(value) {return 2*value+'%';}.

Темы для chart

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

Пример задания графика с помощью скрипта Celesta

# coding: utf-8

import json

from ru.curs.showcase.core.jython import JythonDTO

try:
    from ru.curs.showcase.util import XMLJSONConverter
except:
    from ru.curs.celesta.showcase.utils import XMLJSONConverter

def rawData(context, main, add, filterinfo, session, elementId):
 
    mysettings = {"chartsettings":
                  {"labels":{"header":{"h3":"Выборы президента РФ"}},
                   "properties":{"@flip":False,
                                 "@selectorColumn":"Кандидат",
                                 "@legend":"bottom",
                                 "@height":"300px",
                                 "@width":"500px",
                                 "@hintFormat":"%x (%labely): %value"},
                   "template":{"plot":[{"type":"Lines",
                                        "tension":"S",
                                        "gap": 3,
                                        "markers": true,
                                        "areas": false},
                                       {"type": "Grid",
                                        "name": "grid",
                                        "renderOnAxis": false,
                                        "majorVLine": {"color": {"r": 246,"g": 249,"b": 253,"a": 0.8},
                                                       "width": 1},
                                        "hMajorLines": false,
                                        "hFill": {"r": 246,"g": 249,"b": 253,"a": 0.8},
                                        "hAlternateFill": {"r": 146,"g": 149,"b": 153,"a": 0.8},
                                        "hStripes": true}],
                               "theme": "dojox.charting.themes.ThreeD",
                               "action": [{"type": "dojox.charting.action2d.Shake",
                                           "options": {"duration": 500,
                                                       "easing": "dojo.fx.easing.bounceOut"}},
                                          {"type": "dojox.charting.action2d.Tooltip"}],
                               "axisX": {"title": "Регионы",
                                         "fixLower": "major",
                                         "fixUpper": "major",
                                         "minorLabels": false,
                                         "microTicks": false,
                                         "rotation": -90,
                                         "minorTicks": false}},
                   "labelsY":{"labelY":[{"@text":"двести",
                                         "@value":"200"},
                                        {"@text":"тридцать",
                                         "@value":"30"}]},
                   "records":{"rec":[{"Кандидат":"Путин",
                                      "Москва":"45.5",
                                      "Питер":"57.2",
                                      "Россия":"64",
                                      "properties":{"color":{"@value":"#0000FF"}}},
                                     {"Кандидат":"Зюганов",
                                      "Москва":"19",
                                      "Питер":"13",
                                      "Россия":"18.7",
                                      "properties":{"color":{"@value":"#8A2BE2"}}},
                                     {"Кандидат":"Прохоров",
                                      "Москва":"20",
                                      "Питер":"15",
                                      "Россия":"7",
                                      "properties":{"color":{"@value":"#A52A2A"}}}]}
                  }
                 }    
    
    settings = XMLJSONConverter.jsonToXml(json.dumps(mysettings))
        
    return JythonDTO(None, settings)