1

新しい（つまり、svgベースの）Googleチャートを中央揃えにする方法を知っている人はいますか？

Webページでグラフ要素を調べると（そのページにいくつかのGoogleグラフがあるjQueryタブまでスクロールしてください）、グラフ自体に次のabsolute位置が指定されていることがわかります。

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; ">
<svg width="800" height="500" style="overflow: hidden; ">

グーグルがなぜそれをするのかはわかりませんが、それは私のレイアウトを壊します（それ以外はチャートは私にとってうまく機能します）：

ここに画像の説明を入力してください

私のCSSコード：

    h1,h2,h3,p,div,form { 
    text-align: center; 
}

そして、私もそこに追加しようとしました：

    margin-left: auto; 
    margin-right: auto;

私のJavaScriptコード：

var money_data;
var money_chart;
var money_options = {
        width: 800,
        height: 500,
        legend: {position: 'top'},
        areaOpacity: 1.0,
        vAxis: {format: '# $'},
        hAxis: {title: 'Номер недели', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 39, max: 52}},
        colors: ['CCFFCC', '66CC66', 'FF9999'],
        animation: {duration: 1000, easing: 'out'}
};

function initMoney() {
        $.ajax({
                url: '/money-json.php',
                data: { id: 'OK408547485023' },
                dataType: 'json'
        }).done(function(jsonData) {
                money_data = new google.visualization.DataTable(jsonData);
                money_chart = new google.visualization.SteppedAreaChart(document.getElementById('money_chart'));
                google.visualization.events.addListener(money_chart, 'ready', function() {
                        $('#money_slider').slider('enable');
                });
                drawMoney();
        });
}

function drawMoney() {
        money_chart.draw(money_data, money_options);
}

ここでCSSベースのソリューションが不可能な場合は、JavaScriptを使用してSVGを同じ位置に移動しx、money_slider後者を有効にすることはできますか（上記のコードを参照してください）。

4

2 に答える 2

2

money_chart DIVのサイズをグラフのサイズ（私は800pxと推測しています）に設定し、このような自動マージンを使用することができます。

#money_chart{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}
于 2012-10-01T14:30:13.607 に答える
1

チャート側を別のdivにする必要があります。ここに私のコードがあり、それは私のために機能します 

.chart_outside{
        position:relative;
        display: inline;
        border: 2px solid #FFF;
        width: 500px;
        height: 460px;
        background: #000;
        margin: 5px 5px 5px 5px;
        }

.chart_inside{
        position:absolute;
        right:0px
        ;top:0px;
        }

ここに画像の説明を入力してください

于 2014-07-23T06:52:28.670 に答える