web-dev-qa-db-ja.com

Googleグラフの中央揃え

Googleグラフを中央揃えにしようとしていますが、中央揃えに失敗しました。私はパッドで遊んで中央に移動しましたが、そこに座ってFirebugで長い時間遊んで、正しい位置を見つけたくありません。テキストtext-align: centerの配置など、もっと簡単なものはありますか？明らかにそれはグーグルチャートで動作しません。 （私はこれすべてに新しいです）

var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

...some code ...

    <div id='chart_div' style='width: 900px; height: 400px;'></div>

私はこれをしましたがpadding-left: 140pxですがalign: centerのようなより良い方法があります

htmlcsspositioninggoogle-visualization
13
SherCoder

chart_div：display: blockおよびmargin: 0 auto;

17
Robert Niestroj

私はグーグルゲージで同じ問題に直面しています。生成されたコードを確認すると、<div id='chart_div'>内の次のものがインラインスタイルとして設定されたマージン0のテーブルであることがわかりました。

それをオーバーライドするために、私は次のCSSを使用しました：

div.chart_div table {
    width: auto;
    margin: 0 auto !important;
}

そして、これはうまくいきました。

7
thanassis

<div id='chart_div' align='center'>これでうまくいきましたが、現在、グラフのホバー機能が機能していません。他の誰かがこの問題を抱えていますか？グラフ上のポイントにマウスを合わせると、通常、Jan Sales 440などのポイントが表示されます。修正を知っている人はいますか？

7
user1504583

受け入れられた答えは壊れています。 display：inline-blockを使用してグラフを中央揃えにする必要があります。

7
Mich. Gio.

これらの答えのいずれも私にはうまくいかないので、私はそれをしました：

<div class="chart_box">
  <div id="chart_div" style='width: 900px; height: 400px;'></div>
</div>

.chart_box {
  width: 900px;
  margin: 0 auto;
}

Chart_divとchart_boxには同じ幅を使用する必要があります。

1
Mimoid

chart_divを次のプロパティに設定します。

#chart_div{
  display: inline-block;
  margin: 0 auto;
}
1
Pardesi_Desi

widthは固定されているため、margin-leftおよびmargin-rightをautoに設定してみてください。位置が相対的であると仮定して機能するはずです。

1
Soufiane Hassou

JavaScriptでCSSを変更するには、readyイベントをサブスクライブします。以下のようなものでうまくいきます。

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var guageOptions = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };

  var guage = new google.visualization.Gauge(document.getElementById('my-div'));

  // HERE'S HOW TO SUBSCRIBE TO THE EVENT
  google.visualization.events.addListener(guage, 'ready', resetTableStyle);

  guage.draw(data, guageOptions);

  // HERE'S THE JAVASCRIPT TO SET YOUR CSS
  // NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
  function resetTableStyle(){
    var myDiv = document.getElementById('my-div');
    var myTable = myDiv.getElementsByTagName('table')[0];
    myTable.style.margin = 'auto';
  }
0
Ronnie Royston

以下のように、ここでいくつかの回答を組み合わせました。

CSSクラスを作成します。

.customChartStyle{
    border:1px solid #eee;
    text-align:center !important;
}

次のコードをtable.draw（）呼び出しに追加して、テーブルのセルに追加します。

'allowHtml': true, 'cssClassNames': {'tableCell': 'customChartStyle'}}

私はグーグルチャートに不慣れですが、私にとって重要なのは、テキスト配置スタイルに！importantを追加することでした（おかげでassassis）。私の場合、tableCellスタイルをオーバーライドするとそれ以外の方法で削除されるため、ボーダースタイルが必要でした。また、APIによって生成されたスタイルをオーバーライドするのではなく、クラスを定義してチャートAPIに適用させることを好みます。

0
nvioli