(Flex) Flex (2011 год)

Флекс диаграммы.

Так сложилось, что мне нечасто приходится выводить диаграммы в своих проектах. А что делаешь нечасто - забывается слишком легко. Хотя диаграммы я люблю и пользуюсь ими всегда. Например мой топик Фальсификация выборов в Москве (база данных для статистических исследований) построен именно на диаграмме. Именно наглядность данных статистического анализа, поданная с помощью c помощью диаграммы - позволяет в явном виде продемонстрировать факт совершения вопиющего преступления - фальсификации волеизъявления народов Российской Федерации. А ровно те же самые данные, упрятанные конторой Чурова на его сайте в тысячи отдельных таблиц и табличек (каждая из которой открывается на своей страничке) - не показывают вообще ничего. Это просто тысячи и тысячи таблиц с цифирьками. Кто и что пытался намутить в этих цифирках - совершенно непонятно. Группенфюрер Чуров нам объвляет только итог своих табличек - мы, мол, тут все посчитали, проверили и у нас тут получается что Верховный Чекистский ЛысоГном будет вашим хозяином пожизненно. И только на диаграмме (в которой можно окинуть одним взглядом все расчеты конторы Чурова) сразу видно - 140 миллионов человек, полностью игнорируя Конституцию Российской Федерации и руководствуясь корыстными умыслами, цинично и нагло дурачит чисто конкретная бангдруппировка, известная как "Питерские Чекисты".

Так же полезны и наглядны диаграммы и для прочих случаев статистического анализа. Например в моем топике WebDownloader_UltraLite - ваш личный поисковик по рунету с особыми возможностями поиска я наглядно показал именно с помощью диаграмм тот сектор рынка в 0,4%, которые сумела завоевать бригада Билла Гейтса со своими чудо-технологиями - в интернете. В идеально конкурентной среде, в среде где не срабатывают взятки, в среде где надо доказывать на деле, что твои технологии лучше. И эти статистические данные наводят на удивительные вопросы - как такая мизерная доля рынка могла привести к такому крупному гнойному нарыву, как Билл Гейтс (самый богатый человек планеты). И по здравому размышлению понимаешь - все дело во взятках, ибо ничьи другие технологии (даже существенно лучшие) не изучают в школе в обязательном порядке.


Flex не только превосходный инструмент рисования векторной графики - но, что особенно приятно, флекс позволяет позволяет обрабатывать и выводить на диаграммы большие обьемы либо локальных данных - Открой для себя SQLite, либо данных, хранимых на сервере - Как сделать SOAP/WSDL-вебсервис на ASP.NET/MONO для вызова его из FLEX. Сочетание всех этих условий - превосходная, быстрая и хорошо управляемая графика, наличие мощных готовых контролов, возможность обрабатывать большие обьемы данных даже непосредственно в браузере - и делают Флекс настоящей технологической бомбой для вывода диаграмм.

Сами по себе контролы флекса для отображения диаграмм - это OpenSource фреймворк от компании Adobe, надстроенный над рисованием простых форм - прямоугольников, секторов, окружностей. Фреймворк это нехилого размера и работает он медленно. Для многих применений контролы (например онлайновое отображение звуков) просто не тянут по скорости. Звук зависает на одной ноте по несколько секунд - пока выстроится даже простейшая столбчатая диаграмка из тысячи столбцов. Бейсик, конечно, работает миниммум в сто раз быстрее - хотя принцип построения диаграмм там точно такой же. Но увы, бейсик работает только на серверах (выкидыш Silverlight'а не в счет), а jQuery на клиентах - работает еще наверное в сто раз медленне откомпилированного байт-кода Flex. Поэтому в реальности - при возникновении необходимости отрисовать диаграмму - выбор есть либо в выводе диаграмм контролами флексового фреймворка - либо можно самому более быстрым кодом отрисовывать какие-то прямоугольнички и волны. Разумеется в самых убогих десктопных Win-приложениях есть и другие варианты - только они трудно переносимы на более современные OpenSource платформы и эти решения обречены на пожизненное гниение в устаревшей операционной системе, принадлежащей Биллу Гейтсу.

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

Aдобовская документация показывает примеры диаграмм лишь в простейших случаях (даже источник данных у них в документации всегда декларативный). Столь простых применений в дикой природе не встречается. Поэтому я и решил тут выложить базовый шаблон проекта диаграммы, который чуть-чуть интереснее адобовской документации. В этом примере кода я ограничился лишь тремя диаграммами, а в принципе в Адобовском фреймворке есть восемь стандартных типов диаграмм (AreaCharts, BarCharts, BubbleCharts, CandlestickCharts, ColumnCharts, HighLowOpenCloseCharts, LineCharts, PieCharts, PlotCharts). У каждого типа диаграмм есть множество режимов. Но в этом кода я сконцентрировался на уходе от декларативного синтаксиса и обошел управление стилями диаграмм, такими как цвет линий, толщина, прозрачность и прочее. Кроме того, все элементы диаграмм могут быть кликабельными и анимированными. К элементам диаграмм можно применять всевозможнейшие фильтры. Легенду диаграмм я тоже здесь для простоты опустил.

Итак, ниже вы видите живую работающую Flex-диаграмму и ее OpenSource:



>

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.


   1:  <?xml version="1.0" encoding="utf-8"?>
   2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   3:                 xmlns:s="library://ns.adobe.com/flex/spark" 
   4:                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
   5:                  creationComplete="init();" height="656" width="643" backgroundColor="#FDF5E6">
   6:      
   7:      <fx:Script>
   8:          <![CDATA[
   9:              import mx.collections.ArrayCollection;
  10:              import mx.events.FlexEvent;
  11:              
  12:              import spark.events.IndexChangeEvent;
  13:              
  14:              [Bindable]
  15:              private var ChartDataProvider1:ArrayCollection=new ArrayCollection();
  16:              
  17:              protected function init():void{
  18:                  //инициализация провайдера данных: первая строка - это ось X, вторая и последующие строки - это данные
  19:                  for(var i:int = 0; i < 10    ; i++){
  20:                      var One:Object={};
  21:                      One.x=i; 
  22:                      One.y1=i;
  23:                      One.y2=i*i;
  24:                      One.y3=i*i*i;
  25:                      One.y4=-i;
  26:                      ChartDataProvider1.addItem(One);
  27:                  }
  28:                  ComboBox1.selectedIndex=1;
  29:                  ComboBox2.selectedIndex=1;
  30:                  ComboBox3.selectedIndex=0;
  31:                  ComboBox4.selectedIndex=1;
  32:                  DynamicCreate();
  33:              }
  34:              
  35:              private function DynamicCreate():void{
  36:                  
  37:                  //**************************************************        
  38:                  //сначала определяется горизонтальная ось - имя строки данных абциссой
  39:                  //**************************************************
  40:                  var xAxis:CategoryAxis = new CategoryAxis();
  41:                  xAxis.categoryField = "x";
  42:                  ColumnChart2.horizontalAxis = xAxis;
  43:                  
  44:                  //**************************************************
  45:                  //создаем первую серию столбцов с данными (в одном столбце будет показано два набора данных)                
  46:                  //**************************************************
  47:                  
  48:                  //SeriesArray1 - определяет одну последовательность данных для столбца
  49:                  var SeriesArray1:Array = new Array();
  50:                  
  51:                  //определение ИМЕНИ поля данных для первой отображаемой последовательности в столбце
  52:                  var OneColumnSeries1:ColumnSeries = new ColumnSeries();
  53:                  OneColumnSeries1.yField="y1"
  54:                  OneColumnSeries1.displayName = "y1";
  55:                  SeriesArray1.push(OneColumnSeries1);
  56:                  
  57:                  //определение имени во второй последовательности данных в том е столбце
  58:                  var OneColumnSeries2:ColumnSeries = new ColumnSeries();
  59:                  OneColumnSeries2.yField="y2"
  60:                  OneColumnSeries2.displayName = "y2";
  61:                  SeriesArray1.push(OneColumnSeries2);
  62:                  
  63:                  //ColumnSeriesSet1 - массив с последовательностями отображаемых данных в одном столбце
  64:                  var ColumnSeriesSet1:ColumnSet = new ColumnSet();
  65:                  //тип коминации двух наборов данных в одном столбце берется из комбобокса
  66:                  ColumnSeriesSet1.type=CurrentType2; 
  67:                  ColumnSeriesSet1.series = SeriesArray1;
  68:                  
  69:                  //**************************************************
  70:                  //теперь создадим вторую серию параллельных столбцов                
  71:                  //**************************************************
  72:                  
  73:                  //SeriesArray2 - определяет вторую последовательность данных (параллелных столбцов)
  74:                  var SeriesArray2:Array = new Array();
  75:                  
  76:                  //определение имени данных в этой второй последовательности
  77:                  var OneColumnSeries3:ColumnSeries = new ColumnSeries();
  78:                  OneColumnSeries3.yField="y4"
  79:                  OneColumnSeries3.displayName = "y4";
  80:                  SeriesArray2.push(OneColumnSeries3);
  81:                  
  82:                  //ColumnSeriesSet1 - массив с последовательностями отображаемых данных во втором параллельном столбце
  83:                  var ColumnSeriesSet2:ColumnSet = new ColumnSet();
  84:                  //тип коминации двух наборов данных в одном столбце берется из комбобокса
  85:                  ColumnSeriesSet2.series = SeriesArray2;
  86:                  
  87:                  //*******************************************
  88:                  //и все загружаем в диаграмму для отображения
  89:                  //*******************************************
  90:                  ColumnChart2.series=[ColumnSeriesSet1, ColumnSeriesSet2 ];
  91:              }
  92:   
  93:              [Bindable]
  94:              private var Type1:ArrayCollection=new ArrayCollection([
  95:                  {label:"overlaid", data:1}, 
  96:                  {label:"stacked", data:2}, 
  97:                  {label:"100%", data:3} 
  98:              ]);
  99:              
 100:              [Bindable]
 101:              private var CurrentType1:String="stacked";
 102:              
 103:              protected function combobox1_changeHandler(event:IndexChangeEvent):void
 104:              {
 105:                  CurrentType1=ComboBox1.selectedItem.label;
 106:              }
 107:              
 108:              [Bindable]
 109:              private var CurrentType2:String="stacked";
 110:              
 111:              protected function combobox2_changeHandler(event:IndexChangeEvent):void
 112:              {
 113:                  CurrentType2=ComboBox2.selectedItem.label;
 114:                  DynamicCreate();
 115:              }
 116:              
 117:              [Bindable]
 118:              private var Type3:ArrayCollection=new ArrayCollection([
 119:                  {label:"segment", data:1}, 
 120:                  {label:"step", data:2}, 
 121:                  {label:"vertical", data:3},
 122:                  {label:"horizontal", data:4}, 
 123:                  {label:"reverseStep", data:5}, 
 124:                  {label:"curve", data:6} 
 125:              ]);
 126:              
 127:              protected function combobox3_changeHandler(event:IndexChangeEvent):void
 128:              {
 129:                  LineChart3.series[2].setStyle("form", ComboBox3.selectedItem.label); 
 130:              }
 131:              
 132:              private var Type4:ArrayCollection=new ArrayCollection([
 133:                  {label:"many series", data:1}, 
 134:                  {label:"explode", data:2}, 
 135:                  {label:"inner", data:3}, 
 136:              ]);
 137:              
 138:              
 139:              protected function combobox4_changeHandler(event:IndexChangeEvent):void
 140:              {
 141:                  if (ComboBox4.selectedItem.data==1){
 142:                      
 143:                      //SeriesArray1 - определяет одну последовательность данных для столбца
 144:                      var SeriesArray1:Array = new Array();
 145:                      
 146:                      //определение ИМЕНИ поля данных для первой отображаемой последовательности в столбце
 147:                      var OneColumnSeries1:PieSeries = new PieSeries();
 148:                      OneColumnSeries1.field="y1"
 149:                      OneColumnSeries1.displayName = "y1";
 150:                      SeriesArray1.push(OneColumnSeries1);
 151:                      
 152:                      //определение имени во второй последовательности данных в том е столбце
 153:                      var OneColumnSeries2:PieSeries = new PieSeries();
 154:                      OneColumnSeries2.field="y2"
 155:                      OneColumnSeries2.displayName = "y2";
 156:                      SeriesArray1.push(OneColumnSeries2);
 157:                      
 158:                      
 159:                      PieChart1.series=SeriesArray1;
 160:                      PieChart1.setStyle("innerRadius",0);
 161:   
 162:                  }
 163:                  else if (ComboBox4.selectedItem.data==2)
 164:                  {
 165:                      //SeriesArray1 - определяет одну последовательность данных для столбца
 166:                      var SeriesArray2:Array = new Array();
 167:                      
 168:                      //определение ИМЕНИ поля данных для первой отображаемой последовательности в столбце
 169:                      var OneColumnSeries2:PieSeries = new PieSeries();
 170:                      OneColumnSeries2.field="y1"
 171:                      OneColumnSeries2.displayName = "y1";
 172:                      OneColumnSeries2.explodeRadius=0.2;
 173:                      SeriesArray2.push(OneColumnSeries2);
 174:                      
 175:                      PieChart1.series=SeriesArray2;
 176:                      PieChart1.setStyle("innerRadius",0);
 177:   
 178:                      
 179:                  }
 180:                  else if (ComboBox4.selectedItem.data==3)
 181:                  {
 182:                                          //SeriesArray1 - определяет одну последовательность данных для столбца
 183:                      var SeriesArray3:Array = new Array();
 184:                      
 185:                      //определение ИМЕНИ поля данных для первой отображаемой последовательности в столбце
 186:                      var OneColumnSeries3:PieSeries = new PieSeries();
 187:                      OneColumnSeries3.field="y1"
 188:                      OneColumnSeries3.displayName = "y1";
 189:                      OneColumnSeries3.explodeRadius=0;
 190:                      SeriesArray3.push(OneColumnSeries3);
 191:                      
 192:                      PieChart1.series=SeriesArray3;
 193:                      PieChart1.setStyle("innerRadius",0.2);
 194:                      
 195:                  }
 196:              }
 197:              
 198:          ]]>
 199:      </fx:Script>    
 200:      
 201:      
 202:      <fx:Declarations>
 203:          <!-- Place non-visual elements (e.g., services, value objects) here -->
 204:      </fx:Declarations>
 205:      
 206:      <s:TileGroup horizontalGap="12" verticalGap="12" width="624" x="10" height="282" y="10">
 207:          <mx:Form width="300" dropShadowVisible="true" borderStyle="solid" borderVisible="true" contentBackgroundColor="#FFFFFF" backgroundColor="#FFFFFF">
 208:              <mx:FormItem>
 209:                  <mx:FormHeading  label="ColumnChart (one column)"/>
 210:                  <mx:FormItem>
 211:                      <s:ComboBox id="ComboBox1" change="combobox1_changeHandler(event)" dataProvider="{Type1}" />
 212:                  </mx:FormItem>
 213:                  <mx:ColumnChart width="250" height="200" showDataTips="true" dataProvider="{ChartDataProvider1}">
 214:                      <mx:horizontalAxis>
 215:                          <mx:CategoryAxis categoryField="x"/>
 216:                      </mx:horizontalAxis>
 217:                      <mx:series>
 218:                          <mx:ColumnSet type="{CurrentType1}">
 219:                              <mx:ColumnSeries yField="y1" displayName="y1"/>
 220:                              <mx:ColumnSeries yField="y2" displayName="y2"/>
 221:                              <mx:ColumnSeries yField="y3" displayName="y3"/>
 222:                          </mx:ColumnSet>
 223:                      </mx:series>
 224:                  </mx:ColumnChart>
 225:              </mx:FormItem>
 226:          </mx:Form>
 227:          <mx:Form width="300" dropShadowVisible="true" borderStyle="solid" borderVisible="true" contentBackgroundColor="#FFFFFF" backgroundColor="#FFFFFF">
 228:              <mx:FormHeading  label="ColumnChart - First Column Type"/>
 229:              <mx:FormItem>
 230:                  <s:ComboBox id="ComboBox2" change="combobox2_changeHandler(event)" dataProvider="{Type1}" />
 231:              </mx:FormItem>
 232:              <mx:FormItem>
 233:                  <mx:ColumnChart id="ColumnChart2" width="250" height="200" showDataTips="true" dataProvider="{ChartDataProvider1}">
 234:                  </mx:ColumnChart>
 235:              </mx:FormItem>
 236:          </mx:Form>
 237:          <mx:Form width="300" dropShadowVisible="true" borderStyle="solid" borderVisible="true" contentBackgroundColor="#FFFFFF" backgroundColor="#FFFFFF">
 238:              <mx:FormItem>
 239:                  <mx:FormHeading  label="LineChart (first line type)"/>
 240:                  <mx:FormItem>
 241:                      <s:ComboBox id="ComboBox3" change="combobox3_changeHandler(event)" dataProvider="{Type3}" />
 242:                  </mx:FormItem>
 243:                  <mx:LineChart id="LineChart3" width="250" height="200" showDataTips="true" dataProvider="{ChartDataProvider1}">
 244:                      <mx:horizontalAxis>
 245:                          <mx:CategoryAxis categoryField="x"/>
 246:                      </mx:horizontalAxis>
 247:                      <mx:series>
 248:                          <mx:LineSeries  yField="y1" displayName="y1"/>
 249:                          <mx:LineSeries  yField="y2" displayName="y2"/>
 250:                          <mx:LineSeries  yField="y3" displayName="y3"/>
 251:                      </mx:series>
 252:                  </mx:LineChart >
 253:              </mx:FormItem>
 254:          </mx:Form>
 255:          <mx:Form width="300" dropShadowVisible="true" borderStyle="solid" borderVisible="true" contentBackgroundColor="#FFFFFF" backgroundColor="#FFFFFF">
 256:              <mx:FormItem>
 257:                  <mx:FormHeading  label="PieChart"/>
 258:                  <mx:FormItem>
 259:                      <s:ComboBox id="ComboBox4" change="combobox4_changeHandler(event)" dataProvider="{Type4}" />
 260:                  </mx:FormItem>
 261:                  <mx:PieChart width="250" height="200" showDataTips="true"  id="PieChart1" dataProvider="{ChartDataProvider1}" >
 262:                      <mx:series>
 263:                          <mx:PieSeries field="y1" displayName="y1" explodeRadius="0.2" />
 264:                      </mx:series>
 265:                  </mx:PieChart>
 266:              </mx:FormItem>
 267:          </mx:Form>    
 268:      </s:TileGroup>
 269:   
 270:  </s:Application>


Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: //www.vb-net.com/Flex_Diagram/index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>