2016-04-01 43 views
0

我已經使用Plotalot擴展在我的Joomla網站上創建不同類型的圖表。特別是我有一些關於曲線圖的邊緣問題。我把圖表放在一個容器內,儘管我已經將圖表製成幾乎整個容器的大小,但它在邊和底部留下了大量的邊緣。我不太清楚如何減少它周圍的白色區域。如何減少文章內圖表的填充

這裏是我迄今爲止的容器和圖表兩個CSS和圖表本身的代碼:

#chart_42_container { 
clear: right; 
float: right; 
margin-left: 1px; 
width: 577px; 
height: 400px; 
} 

#chart_42 { 
height: 398px; 
width: 575px; 
} 

google.load('visualization', '1.0', {packages:['corechart']}); 
google.setOnLoadCallback(create_chart); 
function create_chart() { 
window.plotalot_chart_42_data = new google.visualization.DataTable(); 
window.plotalot_chart_42_data.addColumn('string', 'Labels'); 
window.plotalot_chart_42_data.addColumn('number', 'Values'); 
window.plotalot_chart_42_data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); 
window.plotalot_chart_42_data.addRows(
[['96 Users',96,'<strong>96 Users</strong><br />Criticized the Suction of the Bissell Spotlifter 1716B'],['31 Users',31,'<strong>31 Users</strong><br />Praised the Suction of the Bissell Spotlifter 1716B'],['300 Users',300,'<strong>300 Users</strong><br />Did Not Mention the Suction of the Bissell Spotlifter 1716B in their Review']]); 
window.plotalot_chart_42_options = {title:'Breakdown of Comments About the Bissell Spotlifter 1716B\u0027s Suction Capability',backgroundColor:'#ffffff',is3D:true,pieSliceText:'value',legend:{position:'right'} 
,tooltip: {isHtml: true}} 
window.plotalot_chart_42 = new google.visualization.PieChart(document.getElementById('chart_42')); 
window.plotalot_chart_42.draw(window.plotalot_chart_42_data, window.plotalot_chart_42_options); 
} 

下面是我的文章本身的HTML:

<div id="chart_42_container">{plotalot id="42"} 
<i>If you're wondering why the total of the three groups displayed in this graphs is greater than the number of reviews we analyzed (425) for the Bissell Spotlifter 1716B, this is because there were 2 reviews that made both positive and negative remarks about this unit's suction.</i>  
</div> 

我試着在圖表下方的空白處使用<em>標籤在圖表下方以斜體添加註釋,但是這已被推下並與其中一個段落中的文本重疊。

下面是用一塊表的部分:https://www.reviewminr.com/product-reviews/carpet-cleaner-reviews/bissell-spotlifter-1716b-review#suction

我知道它必須能夠以某種方式減少這些利潤作爲擴展的演示現場,他們有兩個這些相同的餅圖與沒有這些大的白色邊緣的並且他們也在圖表的下面以斜體顯示了評論。

任何想法?提前致謝。 chart_42_container的

回答

0

變化高度

#chart_42_container{height:500px} 

則文本將在容器

邊緣具有與chart_42的高度來完成顯示

#chart_42{height:398px;} 
+0

我已經實施了變化你建議並且是的,斜體文本現在不會與文章中的其他文本重疊。但是,請注意圖表和斜體文本之間的相當大的差距?這就是我想要刪除的內容。斜體文字應該更接近圖表。 – CCHert

+0

你必須使圖表更小,高度是398px –

+0

只是做到了這一點。現在差距較小,但麻煩在於,斜體文本之後現在有一個填充(間隙)區域。我如何刪除填充區域? – CCHert

相關問題