Geek Answers Handbook

PieChart Single Slice Icon

I am working with PieChart and PieSeries components in Flex and have encountered a problem. When the labelPosition property for PieSeries is set to "inside" and there is only one fragment in the pie, the label is not displayed.

Looking at the documents, I guess his some quirks associated with when the internal tags are removed. The document reads as:

Draw labels inside the chart centered about seven tenths of a length along each wedge. Shrink labels so that they do not interfere with each other. If labels are reduced below the calloutPointSize property, delete them. When two labels overlap, Flex gives priority to labels for large fragments.

One job is to detect 1 slice and add another element to the dataProvider with a null value, but the display label is still not where I like it, and there seems to be no way to move it.

Another solution would be to wrap PieChart with a canvas and just display the text on top in the same format that I use for labels, but I would prefer that you don't have to go this route (including rendering text on the chart canvas, which might be a little smaller hacking, but still hacking).

Here is the code that demonstrates my problem:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="vertical"
  backgroundColor="white"
  >

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable] public var pieData:ArrayCollection = new ArrayCollection([
        {value: 50, label: "This is a\nlong label"}
      ]);
      [Bindable] public var pieData2:ArrayCollection = new ArrayCollection([
        {value: 50, label: "This is a\nlong label"},
        {value: 0, label: ""}
      ]);
    ]]>
  </mx:Script>

  <mx:HBox
    width="100%"
    height="100%"
    >
    <mx:PieChart
      width="100%"
      height="100%"
      >
      <mx:series>
        <mx:PieSeries
          dataProvider="{ pieData }"
          field="value"
          labelField="label"
          labelPosition="callout"
          />
      </mx:series>
    </mx:PieChart>
    <mx:PieChart
      width="100%"
      height="100%"
      >
      <mx:series>
        <mx:PieSeries
          dataProvider="{ pieData }"
          field="value"
          labelField="label"
          labelPosition="insideWithCallout"
          />
      </mx:series>
    </mx:PieChart>
    <mx:PieChart
      width="100%"
      height="100%"
      >
      <mx:series>
        <mx:PieSeries
          dataProvider="{ pieData }"
          field="value"
          labelField="label"
          labelPosition="inside"
          />
      </mx:series>
    </mx:PieChart>
  </mx:HBox>

  <mx:HBox
    width="100%"
    height="100%"
    >
    <mx:PieChart
      width="100%"
      height="100%"
      >
      <mx:series>
        <mx:PieSeries
          dataProvider="{ pieData2 }"
          field="value"
          labelField="label"
          labelPosition="callout"
          />
      </mx:series>
    </mx:PieChart>
    <mx:PieChart
      width="100%"
      height="100%"
      >
      <mx:series>
        <mx:PieSeries
          dataProvider="{ pieData2 }"
          field="value"
          labelField="label"
          labelPosition="insideWithCallout"
          />
      </mx:series>
    </mx:PieChart>
    <mx:PieChart
      width="100%"
      height="100%"
      >
      <mx:series>
        <mx:PieSeries
          dataProvider="{ pieData2 }"
          field="value"
          labelField="label"
          labelPosition="inside"
          />
      </mx:series>
    </mx:PieChart>
  </mx:HBox>

</mx:Application>

Has anyone encountered this problem or was aware of a working solution / good solution?

+3
source share
2 answers

, , , , .

, , , .

+1

Flex CartesianDataCanvas.

. " " Visual Data Visualization/Flex Charting Components/

0

More articles:


All Articles