Этот пост адресован всем, кто использует Flex для визуализации данных. Надеюсь, вы любите графики так же, как и я? :)
График - самый быстрый способ достучаться до сердца и мозга слушателя или читателя.
В Flex есть замечательная библиотека charts, содержащая графики на все случаи жизни - от линейных графиков до диаграмм со столбиками и кружками.
Одна проблема - эти графики слишком гламурно выглядят для современных ученых. Например, так:
В чем разница?
График - самый быстрый способ достучаться до сердца и мозга слушателя или читателя.
В Flex есть замечательная библиотека charts, содержащая графики на все случаи жизни - от линейных графиков до диаграмм со столбиками и кружками.
Одна проблема - эти графики слишком гламурно выглядят для современных ученых. Например, так:
Для тех кому интересно: это лестница Ламерея на кубическом одномерном отображении.
А хочется попроще, как в учебнике. Вот как-то так:
В чем разница?
- Тени! Ужасные тени под графиками
- На фоне линии уровня, параллельные Ox
- Ось Ox на первом графике неизвестно где, положение рассчитано автоматически
- Цвета. На мой взгляд, они должны быть разными, но в отечественной литературе любят простые одноцветные графики
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>
Вот и всё, такие графики можно всавлять в серьёзные статьи и отпраялять в печать :)