2017-09-11 23 views
0

ノード上にハイチャートのデータをロードしていますが、単一ページのアプリケーションに反応してしまい、ページの中央に配置する方法がわかりません。現在、それは次のようになります。それが左に浮いていますし、私は途中でオレンジ色のボックス内のすべてのものを中心にしたいハイチャートの円グラフと凡例をページに表示するにはどうすればいいですか?

enter image description here

。私はhighcharts apiのドキュメント全体を見てきたし、それを理解するように見えることはできません。 jsfiddleはここにある:http://jsfiddle.net/tobitobetoby/1fqvzpdn/36/divタグに

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(); 
    } 
    } 
} 
+0

エクスポート時に無関係ですが、 ' 'がレンダリングされます。スペースのために、アイコン自体に右パディングを追加することができます。 –

+0

少なくとも、最後にセミコロンがあるはずです。 '&nbsp'→'   ' –

答えて

0

にこのフィールドを追加更新され、index.cssファイルが故にできない、index.jsファイルにインポートされていませんでしたcssコマンドを参照する。解決方法は、index.jsファイルに次のように追加します。

import './index.css'; 

コードの先頭にその後index.cssファイル、追加で:

.highcharts-container { 
    margin: 0 auto; 
} 

そして、これはHighchartsのdivを入力中心に説明します。

0

センター、それを(それがjsfiddleの中心にいたとしても、それはウェブ/ htmlページ上の左に浮かびます)。 align="center"divに追加するだけです。ここにあなたの

0

fiddleは完全にgitのレポを見てみると、あなたのjs機能

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

あなたの推薦でフィドルを更新すると、グリッド全体が乱れてしまいます。 –

関連する問題