20

Google Charts API (Google Chart イメージではありません) から折れ線グラフのタイトルを中央に配置するにはどうすればよいですか?

titlePosition: 'center' のようなオプションが表示されません

ありがとう！

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['xValues', 'yValues'],
    [0, 34.92],
    [389, 39.44],
    [488, 52.11],
    [652, 55.4]
  ]);

  var options = {
    curveType: 'none', // 'function'
    title: 'Title',
    titleTextStyle: {
      color: '333333',
      fontName: 'Arial',
      fontSize: 10
    },
    legend: 'none',
    enableInteractivity: false
  };

  var chart = new google.visualization.LineChart(document.getElementById('visualization'));
  chart.draw(data, options);
}

</p>

4

13 に答える 13

20

このオプションはAPIでは提供されません。あなたは単にこれを行うことはできません.

于 2013-01-31T03:49:03.800 に答える
1

チャートを描画した後、イベント ハンドラー関数を呼び出します。

google.visualization.events.addListener(chart, 'ready', Title_center);

関数を次のように定義します。

function Title_center(){

     var title_chart=$("#payer_chart_div svg g").find('text').html();   

     $("#payer_chart_div svg").find('g:first').html('<text text-anchor="start" x="500" y="141" font-family="Arial" font-size="18" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">'+title_chart+'</text>');
}

チャートのタイトルを挿入し、属性を追加するだけX:500ですy:141。

于 2016-01-11T05:43:46.297 に答える
0 
$("#YOUR_GRAPH_WRAPPER svg text").first()
   .attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));

ここで私の説明を参照してください

于 2016-06-21T22:08:27.100 に答える
0 
function Title_center(total) {
    var title_chart = $("#chart svg g").find('text').html();
    var x = $("#chart svg g").find('rect').attr('width');
    var y = $("#chart svg g").find('rect').attr('y');
    alert(x);
    $("#chart svg").find('g:first')
                   .html('<text text-anchor="start" x="'+x/2+'" y="'+y+'" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">' + total + '</text>');
}

スクリプトでこの関数を作成し、チャート描画後に次のように呼び出します。

google.visualization.events.addListener(chart, 'ready', Title_center("Test success"));
于 2019-01-09T10:12:33.847 に答える
0
  • 中央のグラフ タイル
  • タイトルの長さに動的に調整
  • google.visualization.LineChartのタイトルと重なる(他の種類のグラフではテストされていません)

これらすべてが 1 つの CSS クラスと 4 行の JavaScript に含まれています。

ここで回答済み

于 2020-10-23T14:25:15.970 に答える