5

私はいくつかのチャートを実装するように割り当てられ、上司はチャートのタイトルをチャートから分離するように私に要求しました。チャートの領域を上から少し移動しようとしましたが、タイトルもチャートとともに移動しました。

チャートエリアの前 チャートエリアの後

私は使用してみました：chartArea:{top:80}そして結果はスクリーンショットでした。タイトルだけを移動するプロパティは別のものだと確信していますが、まだ見つかりません。ところで、これは私のオブジェクト全体です:

var columnChartProps = {
    fontName: 'HelveticaNeueBC',
    legend: {position: 'none'},
    titleTextStyle: {fontSize: 18},
    hAxis:  {color: '#121b2d'},
    vAxis: {
        gridlines: {color: '#666666'}
    },
    width: 400,
    height: 300,
    backgroundColor: '#CBCBCB',
    chartArea:{top:80, width:"80%"}
}
// VENCIMIENTOS:
var vencData = google.visualization.arrayToDataTable([
    ['equis', 'Vencimientos'],
    ['ENE', 7],
    ['FEB', 10],
    ['MAR', 5],
    ['ABR', 6],
    ['MAY', 10],
    ['JUN', 15]
]);

var vencOptions = {
    colors:['#24375e','#2c4370','#324a7c','#38538a','#3e5b96','#4363a3'],
    title: 'Vencimientos prox. 6 meses',
    hAxis: {title: 'Meses'}
};

var vencimientos = new google.visualization.ColumnChart(document.getElementById('vencimientos'));
vencimientos.draw(vencData, jQuery.extend({},vencOptions,columnChartProps));

前もって感謝します ：）

4

3 に答える 3

3

PerryW が言ったように、与えられた API でこれを行うことはできないと思います。これを行う最も簡単な方法は、2 行目にグラフを含む html テーブルを作成することです。

<table>
    <thead>
        <th>Vencimientos prox. 6 meses</th>
    </thead>
    <tbody>
        <td>
            ***YOUR CHART HERE***
        </td>
    </tbody>
</table>

好きなだけスタイルや場所をいじることができるようになりました!

于 2015-09-08T21:31:06.973 に答える
0

Googleがタイトルの位置を提供したときはイライラしますが、jQueryを使えばそれができます

$("#YOUR_GRAPH_WRAPPER svg text").first()
 .attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));

基本的に、チャート タイトルである最初のテキスト タグにアクセスし、x 属性の値を変更します。中央に配置するには、svg 幅 (グラフの幅) をタイトル ウィドッチで減算し、2 で割ります:) ハッピー ハッキング :)

于 2016-06-21T22:04:05.613 に答える