Question

我有一个显示标题和图表的容器。我希望在标题之后和图表之前放置两个下拉菜单。但是，这似乎不起作用。如果它确实有效，我需要自动调整所有标题下拉列表和图表，就像标题变大，容器的其他部分应该增长或缩小。

我现在面临的问题似乎不起作用。谁能帮我？你可以在这里找到小提琴http://jsfiddle.net/BETBk/105/

    <script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px">
    <div id='some'>
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
    <select>
        <option value="more">More</option>
        <option value="lidl">Lidl</option>
        <option value="coop">COOP</option>
        <option value="ICA">IKA</option>
    </select>
</div>

</div>

图表定义=======

$(function () {
    $('#container').highcharts({
        chart: {
            plotBorderWidth: 1,
            marginLeft: 80
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        title: {
            useHTML:true,
            text: '<div class="lhsTitle">My custom  some sata do become dight title fdskfsdkjl fhdsfhdskf dsfhsdfsoinf lfsdlfadsofs  dsfl skjldfjdsfjdsklfjdsklfjadskl ljklf dsklf dsklaf ddddd dd   ddddd  dd ddd   ddddddd adsklfadsklfj</div>',
            align: 'left',
            x: 70
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

CSS ============

   .lhsTitle {
    float:left;
}
.rhsTitle {
    float:right
}

.highcharts-title {
    overflow:hidden;
}
#some{
    top : -360px;
    margin-left: 40px;
    position: relative; 
    height : auto;
    overflow:auto;
    display: inline-block;
   }
#container{
    overflow:hidden;   
}

由于

Answer 1

首先，在渲染图表后，您的选择框将被删除，因为您将它们放置在图表容器中。

您可以尝试将选择框直接放在标题的text-attribute中。这会导致click-event of the container div出现一些问题（这会阻止选择框打开）。这可以解决，但也许你会得到你不想要的副作用。

另一种（可能更好）的方法是使用编程方式将div放在你想要的位置。

这是一个将选择框始终置于标题下的示例（无论标题有多长/短）。基本代码行如下：

var offset = $(".lhsTitle").offset();
$("#some").offset({ top: offset.top +$(".lhsTitle").height(), left: offset.left})

http://jsfiddle.net/BETBk/108/

这里的一个重点是你必须设置一个z-index＆gt;带有选择框的container-div中的0，否则它们不会被显示。另外，不要忘记给title-div一些底部填充，以便为select-box-div保留一些空间。

Highchart容器确实持有内部div

1 个答案: