设置绘图高度并允许图表的其余部分调整大小

Question

我试图将图表显示为单个水平列，其下方有垂直图例。这就是我到目前为止所拥有的：

Highcharts.chart('container', {
  "legend": {
    "itemMarginBottom": 10
  },
  "responsive": {
    "rules": [
      {
        "condition": {
          "maxWidth": 700
        },
        "chartOptions": {
          "legend": {
            "layout": "vertical"
          }
        }
      }
    ]
  },
  "chart": {
    "type": "bar",
    "margin": [
      0,
      0,
      44,
      0
    ]
  },
  "credits": false,
  "plotOptions": {
    "bar": {
      "dataLabels": {
        "enabled": true,        
        formatter() {
          let value = this.y * 100;
          return value > 4 ? `${ value.toFixed(1) }%` : null;
        },

        "overflow": "none"
      },
      "groupPadding": 0,
      "pointPadding": 0
    },
    "series": {
      "animation": false,
      "pointPadding": 0,
      "pointWidth": 40,
      "stacking": "percent",
      "events": {},
      "marker": {
        "states": {
          "hover": {
            "enabled": false
          },
          "select": {
            "enabled": false
          }
        }
      }
    }
  },
  "series": [
    {
      "name": "Optimized",
      "data": [
        0.7455639561796032
      ],
      "zIndex": 0
    },
    {
      "name": "Partially Optimized",
      "data": [
        0.1260607930874859
      ],
      "zIndex": -1
    },
    {
      "name": "Not Optimized",
      "data": [
        0.064033328190094
      ],
      "zIndex": -2
    },
    {
      "name": "Plant Off",
      "data": [
        0.06434192254281708
      ],
      "zIndex": -3
    },
    {
      "name": "Communication Failure",
      "data": [
        0
      ],
      "zIndex": -4
    }
  ],
  "title": false,
  "tooltip": false,
  "xAxis": {
    "labels": false,
    "maxPadding": 0,
    "minPadding": 0
  },
  "yAxis": {
    "endOnTick": false,
    "labels": false,
    "maxPadding": 0,
    "min": 0,
    "minPadding": 0,
    "reversedStacks": false,
    "title": false
  }
});

这就是它的样子：

图表是响应式的，我真的很想避免为整个图表设置硬编码高度。相反，我希望图表的绘图高度为40px，并且Highcharts要调整图表的高度以包含图表传奇的剩余空间。

理想情况下，它看起来像这样：

这是JSFiddle的链接。

Answer 1

您可以将MONTH(created)和xAxis的高度更改为40px，并在每次重绘事件时计算图表的最佳高度（上边距+ yAxis +下边距的高度）。看一下下面的例子。

API参考：
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/chart.events.redraw

例：
http://jsfiddle.net/e6hf0ms3/