如何在页面上居中 highcharts 饼图和图例？答案

【问题标题】：How to center highcharts pie chart and legend on a page?如何在页面上居中 highcharts 饼图和图例？
【发布时间】：2017-09-11 17:29:05
【问题描述】：

我正在将我的 highchart 数据加载到节点/反应单页应用程序上，但我不知道如何将其置于页面中间。目前它看起来像这样：

它向左浮动，我想将所有内容放在中间的橙色框中。我查看了整个 highcharts api 文档，但似乎无法弄清楚。 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();
    }
  } 
}

【问题讨论】：

不相关，但导出时会呈现&nbsp;。您可以为图标本身添加右填充以获得空间。
或者至少应该有结束分号。 &nbsp→&nbsp;

标签： javascript html css highcharts

【解决方案1】：

查看完整的 git repo，index.css 文件没有被导入 index.js 文件，因此无法引用 css 命令。解决方法是，在 index.js 文件中，添加：

import './index.css';

到代码的顶部。然后在index.css文件中，添加：

.highcharts-container {
  margin: 0 auto;
}

这将使进入 Highcharts div 居中。

【讨论】：

【解决方案2】：

在div 标记中居中。只需将align="center" 添加到div 即可。这是您更新的fiddle

【讨论】：

【解决方案3】：

在你的 js 函数中添加这个字段

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

【讨论】：

当我用你的建议更新小提琴时，它会导致整个网格混乱。