Question

我使用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

我知道必须能够以某种方式减少这些边距，就像在Extension的演示网站上一样，它们有两个相同的饼图，没有这些大的白边距，并且它们在图表下方也有斜体的注释。

有什么想法吗？提前谢谢。

Answer 1

更改chart_42_container的高度

#chart_42_container{height:500px}

然后文本将显示在容器

中

保证金与chart_42

的高度有关

#chart_42{height:398px;}

如何减少文章中图表的填充

1 个答案: