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

Question

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

\n\n

\n\n

它向左浮动，我想将所有内容都集中在中间的橙色框中。我浏览了 highcharts api 文档，但似乎无法弄清楚。jsfiddle 在这里： http: //jsfiddle.net/tobitobetoby/1fqvzpdn/36/（尽管它以 jsfiddle 为中心，但它在 web/html 页面上浮动到左侧）

\n\n

chart = new Highcharts.Chart({\n  chart: {\n      renderTo: \'container\',\n      type: \'pie\',\n      events: {\n        load: function(event) {\n          var chart = this,\n            points = chart.series[0].points,\n            len = points.length,\n            total = 0,\n            i = 0;\n          for (i = 0; i < len; i++) {\n            total += points[i].y;\n          }\n          chart.setTitle({\n            text: \'<br>\xe2\x82\xac\' + total,\n            verticalAlign: \'middle\',\n            style: {\n              fontFamily: \'Arial,Roboto,Helvetica,sans-serif\',\n              fontWeight: \'bold\',\n              fontSize: 34\n            },\n          });\n          // Adding \'transaction\' label - labels below don\'t support images/icons\n          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();\n          // Adding date label\n          this.renderer.label("<div class=\'transactions\'>11 Sept 2017 - 11 Oct 2017</div>", 95, 225, null, null, null, true).add();\n    }\n  } \n}\n

\n

Answer 1

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

import './index.css';

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

.highcharts-container {
  margin: 0 auto;
}

这将使输入 Highcharts div 居中。