前军教程网

有时候，所有你需要表达的一个信息通过一个JavaScript Charts饼图就能完成，无需任何太多的细节就能清楚地展现分布。饼图的强大之处在于它可以塞进一个相对较小的容器钟。 amCharts饼图的实施自动将实际的饼图拟合到容器中，同时考虑拉出饼图中的片和标签所需要的自由空间。

考虑一下这个典型场景：在一个200像素边宽中的饼图：

当然，我们可以设置半径属性来使我们的图表看起来更大。饼图看上去大小是合适了，但标签超出了容器的范围所以它们被剪掉了。

边框周围有一些我们可以很容易重复使用的填充，因此我们可以将饼图中的超出容器的部分元素放到这部分填充当中。 要做到这一点，有以下两个简单的诀窍：

1. 使图表容器尺寸更大
2. 将其套在其它div外面，使其将图表限制在同一个区域

图示如下：

大容器里面包含一个小容器。 要使它运行，我们需要全局定位图表容器的top和left负坐标。

#chartwrapper {
  position: relative;
  width: 200px;
  height: 200px;
}
#chartdiv {
  position: absolute;
  top: -30px;
  left: -30px;
  width : 260px;
  height : 260px;
}

最终的结果是图表的某些元素会超出边框范围，但它会显示在填充：

下图是去掉边框的效果图：

相关产品购买请咨询"在线客服"。

本站文章除注明转载外，均为本站原创或翻译