Hi,
I've just committed code that enables charts to be drawn a little more
efficiently. Right now each chart itemRenderer creates an element in the
display list (or HTML DOM). The optimized version uses the FlexJS
core.graphics.GraphicsContainer as a canvas and each itemRenderer draws its
shape into that. A regular bar chart might create 50 display list elements and
the optimized version would only create 50 shapes (or <svg><Rect>).
I will create an example to illustrate the difference.
At this point we could use some feedback and advice. I have only created simple
graphics for the chart axes and use UILabel for the labels on the tick marks. I
am wondering if the display list/DOM structure of chart should be changed to
allow better use of CSS to style the elements. At this point CSS has little
effect; I wanted to get the functionality done first.
Today's basic Chart structure looks like this (these are not actual MXML or
HTML element names, just pseudo elements for illustration).
<chart element>
<svg> <!-- the chart graphics canvas -->
<rect> <!-- or path, one per itemRenderer -->
...
</svg>
<svg> <!-- horizontal axis graphics -->
<svg> <!-- vertical axis graphics -->
<span>tick mark label</span>
.... <!-- all of the tick mark labels for each axis -->
</chart element>
Note that everything is pretty much a sibling and are children of the main
chart element.
First off, does anyone know if SVG text elements can be styled with CSS? If so,
I could convert the UILabel's to SVG on the JavaScript side.
Secondly, would it be helpful to have more structure? For instance, <chart
element>.<horizontal axis>.<tick label>, so that CSS could be used to target
specific elements?
Thanks,
Peter Ent
Adobe Systems
