Question

这真令人沮丧。我正在使用Highcharts为我的某些类别生成BaRCharts。

在大屏幕屏幕上，它的效果非常好。但在小屏幕上，类别标签与栏重叠，如下所示：

我尝试更改宽度，但overlap问题无法解决。

JSFiddle在这里Fiddle

请让我知道帮助。此BAR和标签由Highcharts API

动态生成

Answer 1

让我解释一下这个问题：Highcharts lib正在使用SVG和HTML标签。要在同一时间和地点使用它们，需要使用绝对定位在SVG之上呈现HTML标记。问题就出现了：一般来说，你不能定位SVG和HTML元素，就像那些HTML元素一样（比如HTML-div和SVG-rect vs两个HTML-div）。

我建议使用不同的方法：

使用let tap = UITapGestureRecognizer(target: self, action: Selector("handleTap:")) tap.delegate = self view.addGestureRecognizer(tap) func handleTap(sender:UIGestureRecognizer){ //change your font here }
当文字分为两行时，请更改字体大小，例如更改为@media-queries

演示：http://jsfiddle.net/dp2gmqf1/5/

Answer 2

使用flex更新

这可能会帮助你。

使用flex可以改变元素的顺序，通过这样做，你可以在“svg”之前设置“text div”，使所有位置相对并使它们自然流动。

某些css需要在其值上使用“！important”来覆盖内联样式。

更新2 更新了代码/演示，以展示如何为Safari的css属性添加前缀

FIDDLE demo

#barcontainer > div > svg,
#barcontainer > div > div,
#barcontainer > div > div > span {
    position: relative !important;
}
#barcontainer > div {
    height: auto !important;
}
#barcontainer > div > svg {
    top: -20px !important;
}
#barcontainer > div {
    -webkit-display: flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
}
#barcontainer > div > svg {
    -webkit-order: 2;
    order: 2;
}
#barcontainer > div > div {
    -webkit-order: 1;
    order: 1;
}

您还可以使用一个或多个媒体查询来控制上面应该启动的屏幕尺寸。

@media screen and (max-width: 600px) {
    //flex css 1
}

@media screen and (max-width: 800px) {
    //flex css 2
}

使用javascript更新3

如果你不能/不想要flex这里是一个简单的“交换器”，可以切换svg和文本元素。

注意：您可以使用flex并对旧版浏览器进行回退，其中像这样的脚本启动

FIDDLE demo - JS version

function swapSibling(node1, node2) {
    node1.parentNode.replaceChild(node1, node2);
    node1.parentNode.insertBefore(node2, node1); 
}

window.onload = function() {
    var parent = document.getElementById("barcontainer").children[0];
    var svg = parent.children[0];
    var text = parent.children[1];    
    swapSibling(svg, text);
}

注意：如果您需要支持IE8，请阅读best way to get child nodes

使用缩放更新4

如果内容只需要“更小”，那么可以采取的另一种方法实际上是{+ 3}} barcontainer。这样可以保持现有的比例和布局，并使所有内容变小（或更大），当需要“挤”到很多时，文本通常难以阅读。

Answer 3

不，你不能用纯css做这个，因为它是“position：absolute”的工作方式 - 它不遵循常规页面流，所以没有办法显示与另一个相关的文本（通常定位的元素。

你可以在jQuery中使用javascript，但设计更好的布局似乎更自然。

在html中没有任何更改的Jquery解决方案：http://jsfiddle.net/dp2gmqf1/10/：

var height =  $("#barcontainer > div > div > span").height(); // get the height of the text
$("svg").css("margin-top", height + "px"); // set the top-margin of the svg element

Answer 4

如果不是您的实施问题，您可以将文字“Skole-，uddannelses- og ......”转换为一行。

所以你可以在你的html中这样做：

<div style="width:270px; white-space: nowrap;">Skole-, uddannelses- og kursusudgifter</div>

更新1

尝试这样做：

.chart-container > div svg { margin-top: 30px; }

Answer 5

您的问题纯粹是由于动态代码的放置，如果完全可以将SVG元素移动到包含文本的同一div内，以及删除文本中使用的绝对定位，以及主div的高度，它将按预期工作。

这些变化如下所示：



Skole-, uddannelses- og kursusudgifterCreated with Highcharts 4.1.113.5

P.S。如前所述，这取决于您是否可以在这种程度上操纵动态数据的排序。

http://jsfiddle.net/dp2gmqf1/4/

祝你有愉快的一天，将军。

防止绝对定位Div重叠

5 个答案: