如何在頁面上放置highcharts餅圖和圖例？

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

它浮在左，我想中心在中間的橙色框的一切。我查看了整個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(); 
    } 
    } 
}

來源

2017-09-11 T.Doe

無關，但' '在導出時呈現。您可以爲圖標自身添加正確的填充空間。 –

或者至少應該有結尾分號。 '＆nbsp'→' ' –

縱觀整個混帳回購協議添加這個領域，index.css文件沒有被導入在index.js文件，因此不能夠引用css命令。解決辦法是，在index.js文件中添加：

import './index.css';

返回代碼頂部。然後在index.css文件中，添加：

.highcharts-container { 
    margin: 0 auto; 
}

而這將以輸入Highcharts div爲中心。

來源

2017-09-14 09:36:40

中心就在div標籤。只需將align="center"添加到div即可。這裏是你的更新fiddle

來源

2017-09-11 17:34:18

在你的js函數

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

來源

2017-09-11 17:35:18

當我根據您的建議更新小提琴時，會導致整個網格混亂。 –

如何在頁面上放置highcharts餅圖和圖例？

回答

相關問題