1

我目前正在尝试在 APEX 4.26 中显示固定大小的饼图仪表板，但是，它们需要有一个图例并且它们的内容是动态的。这意味着与只有两个标签的图表相比，具有更多标签的图表具有更大的图例和更小的饼图。

我目前可能的解决方案是为每个图表创建两个区域，一个带有饼图，一个带有图例，然后我可以轻松控制这些区域的大小。

显然，我可以轻松地关闭第一个区域的图例，但我在仅显示另一个区域的图例时遇到了一些麻烦。任何人都可以帮助我解决我需要更改或从 XML 中删除的内容吗？（我假设这是这样做的方法）。这是我现在的 XML：

<?xml version = "1.0" encoding="utf-8" standalone = "yes"?>  
<anychart>  
  <settings>  
    <animation enabled="true"/>  
    <no_data show_waiting_animation="False">  
      <label>  
        <text>#NO_DATA_MESSAGE#</text>  
        <font family="Verdana" bold="yes" size="10"/>  
      </label>  
    </no_data>  
  </settings>  
  <margin left="0" top="-10" right="0" bottom="0" />  
  <charts>  
    <chart plot_type="Pie" name="chart_3232705401305025">   
      <chart_settings>  
        <title enabled="False" />  
        <chart_background>  
          <fill type="Solid" color="0xffffff" opacity="0" />  
          <border enabled="false"/>  
          <corners type="Square"/>  
        </chart_background>  
        <data_plot_background>  


        </data_plot_background>  


        <legend enabled="true" position="Bottom" align="Near" elements_layout="Horizontal" ignore_auto_item="True">  
          <title enabled="False"/>  
          <icon>  
            <marker enabled="true" />  
          </icon>  
          <items>  
            <item source="Points" />  
          </items>  
          <font family="Tahoma" size="10" color="0x000000" />  
        </legend>  
        <chart_animation type="Appear" interpolation_type="Quadratic" show_mode="OneByOne"/>  
      </chart_settings>  
      <data_plot_settings enable_3d_mode="false" >  
        <pie_series style="Aqua">  
          <tooltip_settings enabled="true">  
            <format><![CDATA[{%Name}{enabled:False} - {%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>  
            <font family="Tahoma" size="10" color="0x000000" />  
              <position anchor="Float" valign="Top" padding="10" />   
          </tooltip_settings>  
          <label_settings enabled="false"/>  
          <pie_style>  


          </pie_style>  
          <marker_settings enabled="True" >  
            <marker type="None" />  
          </marker_settings>  
          <connector color="Black" opacity="0.4"/>  
        </pie_series>  
      </data_plot_settings>  


#DATA#  
    </chart>  
  </charts>  
</anychart>

非常感谢任何指针！或者任何关于实现这一目标的更简单方法的好主意。

谢谢！

4

2 回答 2

2

您可以使图表不可见，并设置图例浮动和重叠整个图表，下面的示例就是这样做的，您也可以在 APEX 中复制它。

关键设置是：

<chart_settings>
   <legend enabled="true"  position="Float" width="100%" height="100%"/>
   <title enabled="false" />
</chart_settings>

由此产生的传说

完整设置：

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Pie">
      <data_plot_settings>
        <pie_series apply_palettes_to="Points" radius="0">
          <tooltip_settings enabled="false"/>
          <label_settings enabled="false"/>
        </pie_series>
      </data_plot_settings>
      <chart_settings>
        <legend enabled="true"  position="Float" width="100%" height="100%"/>
        <title enabled="false" />
      </chart_settings>      
      <data>
        <series name="Year 2003">
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" />
        </series>
        <series name="Year 2004">
          <point name="Department Stores" y="737166" />
          <point name="Discount Stores" y="537166" />
          <point name="Men's/Women's Specialty Stores" y="188662" />
          <point name="Juvenile Specialty Stores" y="178662" />
          <point name="All other outlets" y="89000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>

图例设置和定位在：http: //6.anychart.com/products/anychart/docs/users-guide/index.html ?legend-text-formatting.html

于 2015-07-31T12:53:32.487 回答
0

只是为了更新这个问题，我想出了一个适用于一个图表的可能解决方案，并认为我会在这里概述它，以防有人查到这个问题而没有答案。

我使第二个区域中的饼图尽可能小，然后使用 CSS 将第二个区域移动到第一个饼图上，以便第二个区域的图例正确定位在第一个饼图的下方。

然后我使用 z-index 将第二个区域移到第一个后面。这似乎可行，我只需要以某种方式隐藏第二个区域的“等待数据”消息。

于 2015-06-19T15:27:55.073 回答