JavaScript - 图表不显示何时在 div 标签内答案

【问题标题】：JavaScript - Chart does not show when is inside a div tagJavaScript - 图表不显示何时在 div 标签内
【发布时间】：2016-07-11 08:47:34
【问题描述】：

我正在尝试将 JS 图表放在 <div> 中，但问题是当我将它放在 div 标签中时，什么都没有显示！

我尝试过使用不同的库（C3、AmCharts、HighCharts），它们都是相同的问题，在另一个 div 中调用图表的 div 时没有出现：

<div id="chartdiv"></div>

下面这个不行：

<div class="block"><div id="chartdiv"></div></div>

但是，将其放在 div 标签之外时，它可以工作。我尝试调试，但控制台上没有显示错误！

块类的CSS：

.block {
display: block;
width: 98%;
margin-right: auto;
margin-left: auto;
padding-top: 6px;
padding-bottom: 0px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);
}

页面上有 5 个图表，我认为是 JavaScript 冲突导致了该问题。

对正在发生的事情有任何想法吗？我不确定图书馆本身是否存在问题；但是，如果您有图表库并且能够显示实时数据，请分享它。

【问题讨论】：

class="block" 是做什么的？将 <div> 包裹在另一个 <div> 周围并没有什么神奇之处，但你的 CSS 类“块”肯定会导致问题。
什么都没有出现，但是您是否检查了元素以查看里面是否有一些内容？这可能只是关于 div 元素尺寸的问题。
@Pointy 我已经发布了 CSS。我按你说的检查了，我发现图表在那里但没有显示，我相信因为页面上有 5 个图表，所以可能是 javascript 问题？
如果很多库都有同样的问题，那就说明你做错了。 HTML 结构无关紧要（至少对于 Highcharts）。你有你的网站吗？或者您可以在 jsFiddle 上重新创建问题吗？图表数量无关紧要，请参阅 Highcharts 示例：jsfiddle.net/v98mf533 确保您的 div 的 ID 不同。

标签： javascript html highcharts

【解决方案1】：

尝试添加一些明确的 CSS 规则 - 你的 HTML 可能继承了一些意想不到的东西：

.block {
    width: 98%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 6px;
    padding-bottom: 0px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);

    /* Sure you don't want inline-block here? */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

【讨论】：