14

Google チャートを中央揃えにしようとしていますが、うまくいきません。パディングを使って中央に移動しましたが、そこに座ってfirebugで長時間遊んで正しい位置を見つけたくありません。テキストの整列など、より簡単なものはありますかtext-align: center。明らかに、Googleチャートでは機能しません。（私はこれらすべてに不慣れです）

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

4

12 に答える 12

21

chart_div: display: blockと_margin: 0 auto;

于 2012-06-12T23:08:16.167 に答える
10

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

于 2012-10-24T19:32:06.570 に答える
7

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

したがって、それをオーバーライドするために、次の css を使用しました。

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

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

于 2012-10-12T12:33:34.733 に答える
7

受け入れられた答えは壊れています。チャートを中央揃えにするには、 display: inline-blockを使用する必要があります。

于 2015-08-23T23:46:41.350 に答える
2

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

<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 には同じ幅を使用する必要があります。

于 2018-02-13T16:28:42.277 に答える
2

widthは固定なのでと を に設定margin-leftしmargin-rightてみてくださいauto。位置が相対的であると仮定して動作するはずです。

于 2012-06-12T23:08:19.273 に答える
0

イベントにサブスクライブして、readyJavaScript で CSS を変更します。以下のようなものがトリックを行います。

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';
  }
于 2017-01-03T22:01:10.583 に答える
0

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

css クラスを作成します。

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

table.draw() 呼び出しに以下を追加して、テーブルのセルに追加します。

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

私はGoogleチャートを初めて使用しますが、重要なのはテキスト整列スタイルに !important を追加することでした（thanassisに感謝します）。私の場合、tableCell スタイルをオーバーライドするとそれが削除されたため、border スタイルが必要でした。また、API によって生成されたスタイルをオーバーライドするのではなく、クラスを定義してチャート API に適用させることを好みます。

于 2013-04-19T14:48:37.243 に答える