Question

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

查看文档，我猜测它的内部标签被删除时有些怪癖。该文档读作：

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

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

另一种解决方案是用画布包裹PieChart，然后以与我用于标签相同的格式在顶部渲染文本，但我真的更喜欢不必走这条路线（包括在图表的画布上渲染文字），这可能只是一个黑客，但仍然是一个黑客）。

以下是一些证明我的问题的代码：

<?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>

有没有人遇到过这个问题或者知道一个解决方案/好的解决方案？

Answer 1

我所能做的就是指出this bug report，这看起来就是你所遇到的。

我担心我无法获得建议的补丁，也许你会有更好的运气。

Answer 2

Flex图表旨在通过CartesianDataCanvas绘制。

请参阅 Flex数据可视化开发人员指南/ Flex图表组件/使用图表中的事件和效果

中的“绘制图表控件”

干杯

PieChart标签带有一个切片

2 个答案: