【发布时间】:2021-06-28 19:15:39
【问题描述】:
我使用 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> 标记在图表下方空间中的图表下方添加斜体注释,但这已被下推并与其中一个段落中的文本重叠。
我知道必须有可能以某种方式减少这些边距,就像在 Extension 的演示站点上一样,它们有两个相同的饼图,没有这些大的白色边距,并且它们还在图表下方以斜体显示 cmets。
有什么想法吗?提前致谢。
【问题讨论】: