【问题标题】:HighCharts long title text overlapping on some elementsHighCharts 长标题文本在某些元素上重叠
【发布时间】:2015-04-08 13:33:02
【问题描述】:

我有一个图表容器 Div,它可以加载类似于小提琴 http://jsfiddle.net/a6zsn/188 的所有图表和标题。我在标题文本之后和包含并排的多个下拉列表的图表之前放置了另一个 div。 我面临的问题是,当标题太长时,它会出现在下拉列表中。我想进行自动调整,比如如果标题长到下一行,下拉列表和图表应该相应调整。

例如我在

之后有另一个 div
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="someID">Dropdowns</div> // this is where i am failing and text overlaps on to 

谁能有办法克服这个问题?

【问题讨论】:

  • 标题太长了?
  • 高位图表的标题。我试图在小提琴中向您的容器 div 添加一些文本或下拉框。但是为什么我在 html 中看不到任何添加到容器 div 中的东西 - 在小提琴中?
  • 我遇到的问题只有 highCharts 的标题而不是工具提示?
  • 您说如果您的标题较长,则标题文本会重叠。它在哪里重叠,我尝试增加标题文本的长度,但它没有重叠,而是正确调整
  • 是的,但是给定的小提琴中没有下拉菜单。假设,在标题文本(200 个字符或动态增加)之后和图表开始之前有一个下拉菜单。这就是我面临的问题。有什么方法可以让我提前找到 highcharts 标题中的字符并设置下拉菜单并相应调整它们的位置。

标签: javascript jquery css highcharts


【解决方案1】:

您必须按照您在此处提出的同一问题中的说明以编程方式定位“#some”-div;)

Highchart container does hold inner div

【讨论】:

    【解决方案2】:

    我把css改成这样:

    #some {
    display: inline-block;
    margin: 20px 40px;
    position: relative;
    }
    

    而 html 布局是这样的:

    <div id="container" style="min-width: 400px; height: 400px; margin: 0   auto">
    
    </div>
    <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>
    

    看看这里的jsfiddle http://jsfiddle.net/Stenvh/c9azwoku/

    【讨论】:

    • 不,我不想在标题顶部显示下拉菜单。它们应该总是在标题之后和图表开始之前。您的解决方案不适用于我的情况。
    猜你喜欢
    • 1970-01-01
    • 2011-10-08
    • 1970-01-01
    • 2019-05-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-09
    相关资源
    最近更新 更多