Question

我对有关Highchart的问题发了一些垃圾邮件，但看起来我的问题是一个破解者。

我在导航器中有这个结构：

我们可以看到highcharts-container的高度为400px，宽度为268px，highcharts-root的高度相同，但在我的CSS中，我更改这些值以减少图表的一般大小并将其显示为我想：

.highcharts-container {
  width: 100%;
  height: 20% !important;
}
.highcharts-root {
  width: 100%;
  height: 20% !important;
}
.highcharts-background {
  width: 100%;
  height: 20% !important;
}
.divChart {
  width: 100%;
  height: 20% !important;
}

但为什么它不影响图表？！？！

[编辑]我不明白为什么高度仍然是400px看起来：

Answer 1

你应该做出更“清晰”的选择器。基本上使用规则，女巫拥有最准确的选择器。所以试试这个：

.x_panel .x_content .row .highcharts-container {
  width: 100%;
  height: 20% !important;
}

这应该可以解决问题。如果没有，请尝试使其更具体。

编辑：示例。

的结构

<div id="mainCont">
  <div class="subCont">
    <div class="content"> COLOR ME </div>
  </div>
</div>

使用css：

.content{
color: red;
}

将.content变为红色，但是当我们将其添加到css：

时

#mainCont .content{
color:blue;
}

将覆盖第一个，因为它有更具体的选择器。

EDIT2：您可以阅读以下内容：https://developer.mozilla.org/en/docs/Web/CSS/Specificity

Answer 2

我需要在创建图表时定义宽度+高度，如下所示：

nameChart = Highcharts.chart(currentContainer.idChartMem, {
          chart: {
            width: '100%',
            height: '7%'
          },

如何覆盖Highchart的CSS

2 个答案: