【问题标题】:How Do I Reduce the Padding Around a Chart Within an Article如何减少文章中图表周围的填充
【发布时间】: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>

我尝试使用 &lt;em&gt; 标记在图表下方空间中的图表下方添加斜体注释,但这已被下推并与其中一个段落中的文本重叠。

这里是带块图表的部分:https://www.reviewminr.com/product-reviews/carpet-cleaner-reviews/bissell-spotlifter-1716b-review#suction

我知道必须有可能以某种方式减少这些边距,就像在 Extension 的演示站点上一样,它们有两个相同的饼图,没有这些大的白色边距,并且它们还在图表下方以斜体显示 cmets。

有什么想法吗?提前致谢。

【问题讨论】:

    标签: html css charts joomla


    【解决方案1】:

    改变chart_42_container的高度

    #chart_42_container{height:500px}
    

    然后文本将显示在容器中

    边距与chart_42的高度有关

    #chart_42{height:398px;}
    

    【讨论】:

    • 我已按照您的建议实施了该更改,是的,斜体文本现在不会与文章中的其他文本重叠。但是,请注意图表和斜体文本之间的相当大的差距?这就是我要删除的内容。斜体字应该更靠近图表。
    • 你要把图表变小,高度是398px
    • 刚刚做了这个。现在这个间隙变小了,但问题是,斜体文本后面现在有一个填充(间隙)区域。如何删除该填充区域?
    • #chart_42_container{height:410px};
    • 更改容器 #chart_42_container 的高度以使其更小
    猜你喜欢
    • 1970-01-01
    • 2011-08-31
    • 1970-01-01
    • 2013-04-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-25
    相关资源
    最近更新 更多