中文字幕2025,流白浆视频,在线观看免费污视频

產品

產品
資訊
資源
視頻
學院
示例

金喜正規買球 > 資訊 > JavaScript Charts教程：將餅圖擬合到小容器

JavaScript Charts教程：將餅圖擬合到小容器

原創|使用教程|編輯：鄭恭琳|2015-11-06 10:27:26.000|閱讀 375 次

概述：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@fc6vip.cn

上一篇：Navicat Data Modeler使用教程八：數據庫導入（上）下一篇：Qt使用教程：指定生成設置（一）

相關產品

控件

產品功能：圖表

源碼：非開源

產品編號：11974

當前版本：v4.10.15 [銷售以商家最新版為準，如需其他版本，請來電咨詢]

開發商： AMCHARTS

正式授權

">JavaScript Charts

擁有良好兼容性的JavaScript、HTML5圖表開發工具

最新文章 MORE

金喜正規買球相關的文章 MORE

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發社群

JavaScript Charts教程：將餅圖擬合到小容器

用科技創就卓越

Create excellence with technology

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發社群

JavaScript Charts教程：將餅圖擬合到小容器

為你推薦

用科技創就卓越

Create excellence with technology