Highchart容器有内部div [英] Highchart container does hold inner div

问题描述

我有一个容器，显示标题和图表。我想要两个下拉列表应放在标题和图表之前。但是，这似乎不工作。如果它工作，我需要对所有标题下拉菜单和图表进行自动调整，如果标题变大，容器的其他部分应该增长或收缩。

I have a container with title and chart displayed. I want two dropdowns should be placed after the title and before the chart. But, that does not seem to work. If it does work, I need auto adjust on all title dropdowns and chart, like if the title grows large the other parts of the container should grow or shrink along.

我我面临的问题，现在似乎不工作。任何人可以帮助我吗？
你可以在这里找到小提琴 http://jsfiddle.net/BETBk/105/

I am facing problem now that does not seem to work. Can any one help me? You can find the fiddle here 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>

图表定义=======

Chart definition =======

$(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 ============

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;   
}

感谢

推荐答案

首先，在图表呈现后，您的选择框会被移除，因为您将它们放在图表容器中。

First of all, your select boxes are removed after the chart is rendered, since you placed them inside the chart container.

可以尝试将选择框直接放置在标题的text-attribute中。这带来了一些问题的容器div的点击事件（阻止选择框可以打开）。
这可以解决，但也许你会得到你不想要的副作用。

You could try to place the select-boxes directly in the text-attribute of the title. This brings in some problems with the click-event of the container div (which prevents that the select boxes can open). This could be solved, but maybe you get side effects you don't want.

另一个（也许更好）的方式是定位div

Another (maybe better) way to go would be to position the div with the select-boxes programmatically where you want them.

这里是一个例子，将选择框总是放在标题下（无论标题多长/短）。
基本代码行如下：

Here is an example which places the select-boxes always under the title (no matter how long/short the title is). The essential code lines are the following:

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

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

这里的一个重要点是，你必须在container-div中设置z-index> ，否则它们将不可见。
也不要忘记给标题 - 一些底部填充以保持选择框div的一些空间。

One important point here is that you have to set an z-index > 0 in the container-div with the select-boxes, otherwise they won't be visible. Also don't forget to give the title-div some bottom padding to maintain some space for the select-box-div.

这篇关于Highchart容器有内部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！