如何在頁面上居中高圖餅圖和圖例？

Question

我正在節點/反應單頁面應用程序上加載我的高圖數據，我無法弄清楚如何將它放在頁面中間。 目前它看起來像這樣：

它漂浮在左邊，我想把所有東西放在中間的橙色框中。 我看過整個highcharts api doc，似乎無法弄明白。 jsfiddle在這里： http ： //jsfiddle.net/tobitobetoby/1fqvzpdn/36/ （即使它以jsfiddle為中心，它在web / html頁面上浮動到左側）

chart = new Highcharts.Chart({
  chart: {
      renderTo: 'container',
      type: 'pie',
      events: {
        load: function(event) {
          var chart = this,
            points = chart.series[0].points,
            len = points.length,
            total = 0,
            i = 0;
          for (i = 0; i < len; i++) {
            total += points[i].y;
          }
          chart.setTitle({
            text: '<br>€' + total,
            verticalAlign: 'middle',
            style: {
              fontFamily: 'Arial,Roboto,Helvetica,sans-serif',
              fontWeight: 'bold',
              fontSize: 34
            },
          });
          // Adding 'transaction' label - labels below don't support images/icons
          this.renderer.label("<div class='transactions' style='fontSize:20px !important;'><img style='width:25px; height:25px; position:relative; top:7px;' src='https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true'/> &nbsp Transactions</div>", 120, 130, null, null, null, true).add();
          // Adding date label
          this.renderer.label("<div class='transactions'>11 Sept 2017 - 11 Oct 2017</div>", 95, 225, null, null, null, true).add();
    }
  } 
}

Answer 1

查看完整的git repo，index.css文件未在index.js文件中導入，因此無法引用css命令。 解決方法是在index.js文件中添加：

import './index.css';

到代碼的頂部。 然后在index.css文件中添加：

.highcharts-container {
  margin: 0 auto;
}

這將使輸入Highcharts div居中。

Answer 2

將它放在div標簽中。 只需將align="center"添加到div 。 這是你的更新小提琴

Answer 3

在js函數中添加此字段

legend: {
    backgroundColor: '#F5F5F5',
    layout: 'horizontal',
    floating: true,
    align: 'center',
    verticalAlign: 'top'
 }