带有单个切片的饼图标签答案

【问题标题】：PieChart label with a single slice带有单个切片的饼图标签
【发布时间】：2015-08-19 03:46:55
【问题描述】：

我正在使用 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>

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

【问题讨论】：

我也遇到过这个问题，但还没有解决它。感谢您向数据提供者添加零值元素的想法，我会记住这一点。

标签： apache-flex charts

【解决方案1】：

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

恐怕我无法让建议的补丁正常工作，也许你会有更好的运气。

【讨论】：

解决我提出的旧问题...从这里提到的错误报告中看来问题已经解决，但我已经停止在 flex 中进行开发。

【解决方案2】：

Flex 图表旨在通过 CartesianDataCanvas 绘制。

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

干杯

【讨论】：