带有单个切片的PieChart标签 [英] PieChart label with a single slice

查看:133
本文介绍了带有单个切片的PieChart标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用Flex中的PieChart和PieSeries组件,并遇到了问题。当PieSeries的labelPosition属性设置为inside且饼图中只有一个切片时,不会显示该标签。



查看文档,我猜它的一些怪癖相关,当内部的标签被删除。文档内容如下:


在图表中绘制标签,以每个楔形图大约十分之七为中心。收缩标签,以确保它们不会相互干扰。如果标签在calloutPointSize属性下缩小,请将其删除。当两个标签重叠时,Flex给予更大切片的标签优先权。


一个解决方法是检测1个切片并添加另一个元素dataProvider的值为零,但显示的标签仍然不在我想要的地方,并且似乎没有办法移动它。



另一个解决方案是用一个画布包装PieChart,只是渲染文本在顶部与我用于标签相同的格式,但我真的不喜欢走这条路线(包括在图表的画布上渲染文本,这可能



这里是一些演示我的问题的代码:

 <?xml version =1.0encoding =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 \\\
long label}
]
[Bindable] public var pieData2:ArrayCollection = new ArrayCollection([
{value:50,label:This is a \\\
long label},
{value:0,label: }
]);
]]>
< / mx:Script>

< mx:HBox
width =100%
height =100%
>
< mx:PieChart
width =100%
height =100%
>
< 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:PieChart>
< mx:PieChart
width =100%
height =100%
>
< mx:series>
< mx:PieSeries
dataProvider ={pieData}
field =value
labelField =label
labelPosition =inside
/>
< / mx:series>
< / 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
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>有没有人遇到这个问题或知道一个解决方案?/ / p>


$ b b $ b

解决方案

我所能做的只是指出这个错误报告,看起来是你遇到的。



恐怕我不能建议补丁工作,也许你会有更好的运气。


I'm working with the PieChart and PieSeries components in Flex, and have ran into an issue. When the labelPosition property of a PieSeries is set to 'inside' and there is only one slice in the pie, the label doesn't get displayed.

Looking at the docs, I'm guessing its some quirk related to when inside labels are removed. The doc reads as:

Draw labels inside the chart, centered approximately seven tenths of the way along each wedge. Shrink labels to ensure that they do not interfere with each other. If labels are shrunk below the calloutPointSize property, remove them. When two labels overlap, Flex gives priority to labels for larger slices.

One work around is to detect 1 slice and add another element to the dataProvider with a zero value, but the displayed label is still not where I'd like it, and there doesn't seem to be a way to move it.

Another solution would be to wrap the PieChart with a canvas and just render text on top in the same format as I use for labels, but I would really prefer to not have to go this route (including rendering text on the chart's canvas, which might be slightly less of a hack, but still a hack).

Here is some code demonstrating my issue:

<?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 know of a work-around/good solution?

解决方案

All I can do is point out this bug report, which looks to be what you've come across.

I'm afraid I can't get the suggested patch to work though, maybe you'll have better luck.

这篇关于带有单个切片的PieChart标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆