26.8.12

Flex Charts - негламурные графики

Этот пост адресован всем, кто использует Flex для визуализации данных. Надеюсь, вы любите графики так же, как и я? :)
График - самый быстрый способ достучаться до сердца и мозга слушателя или читателя.

В Flex есть замечательная библиотека charts, содержащая графики на все случаи жизни - от линейных графиков до диаграмм со столбиками и кружками.
Одна проблема - эти графики слишком гламурно выглядят для современных ученых. Например, так:
Для тех кому интересно: это лестница Ламерея на кубическом одномерном отображении.
А хочется попроще, как в учебнике. Вот как-то так: 

В чем разница?


  1. Тени! Ужасные тени под графиками
  2. На фоне линии уровня, параллельные Ox
  3. Ось Ox на первом графике неизвестно где, положение рассчитано автоматически
  4. Цвета. На мой взгляд, они должны быть разными, но в отечественной литературе любят простые одноцветные графики
1. Итак, начнем с теней.
У ChartBase - предка всех графиков - есть свойство seriesFilters. Чтобы убрать тени, просто напишите:

<mx:LineChart id="priceChart" width="100%" height="100%" seriesFilters="[]" >

2. Убираем линии. Они лежат в backgroundElements, их, как и тени, до нас туда кто-то заботливо положил. Убираем так же:

<mx:LineChart id="priceChart" width="100%" height="100%" seriesFilters="[]"  backgroundElements="[]" >

3. У графика есть оси. И ими можно тоже уравлять. Чтобы вернуть ось Ox на место, скажем вертикально оси что она должна расти из нуля, тогда там появится и горизонтальная ось:

<mx:LineChart id="priceChart" width="100%" height="100%" seriesFilters="[]"  backgroundElements="[]" >
  <mx:verticalAxis>
    <mx:LinearAxis baseAtZero="true" />
  </mx:verticalAxis>
  ....
</mx:LineChart>

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

<mx:LineChart id="priceChart" width="100%" height="100%" seriesFilters="[]"  backgroundElements="[]" >
  <mx:verticalAxis>
    <mx:LinearAxis baseAtZero="true" />
  </mx:verticalAxis>
  <mx:series>
    <mx:LineSeries displayName="My Price" yField="price" dataProvider="{data}" >
      <mx:lineStroke>
        <s:Stroke color="0x000000" weight="2" />
      </mx:lineStroke>
    </mx:LineSeries>
  </mx:series>
  ....
</mx:LineChart>

Вот и всё, такие графики можно всавлять в серьёзные статьи и отпраялять в печать :)

Комментариев нет:

Отправить комментарий