JavaScript Charts教程：将饼图拟合到小容器-控件新闻-慧都网

JavaScript Charts教程：将饼图拟合到小容器

原创|使用教程|编辑：郑恭琳|2015-11-06 10:27:26.000|阅读 282 次

概述：JavaScript Charts饼图的实施自动将实际的饼图拟合到容器中，同时考虑拉出饼图中的片和标签所需要的自由空间。

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

< JavaScript Charts最新版本下载>

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

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

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

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

图示如下：

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

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

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

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

>>点击查看该功能。

相关产品购买请咨询""。

标签：JavaScript HTML5 图表图表库移动开发图表解决方案图表控件

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

上一篇：Navicat Data Modeler使用教程八：数据库导入（上）下一篇：Qt使用教程：指定生成设置（一）

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群