web-dev-qa-db-ja.com

中央揃えタイトルGoogleグラフ

Google Charts APIではなくGoogle Charts APIから折れ線グラフのタイトルを中央揃えするにはどうすればよいですか？

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);
}

javascriptapichartscenter
17
Turnercj65

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

20
Lightness Races in Orbit

私が使用する：titlePosition： 'none'

通常のHTMLでタイトルを挿入します

11
Werner

別の答え は、次のようなものを示唆しています。

$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})

ソース： https://stackoverflow.com/a/16291236/364

4
Matt Mitchell

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

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を追加するだけです。

2
Anuja Saravanan

これは、チャートが描画された後、コールバック情報を使用して簡単に行うことができます。また、div内の一部のテキストで少し計算を行います。

チャートをposition：relative divに含めます。グラフの下にdivを追加し、divと絶対グラフの両方を配置します。

その後、少し高校の数学でdivの上部と左側の位置を移動できます。

<https://jsfiddle.net/o6zmbLvk/2/>
1
Ray Myers
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"));
0
Gopal Singh

前の回答で述べたように、中央揃えのタイトルを構成することはできません。 「タイトル」設定を設定しないでください。デフォルトでは表示されません。

次に、HTML、いくつかのコードでタイトルを設定できます。

<div>
    <div style="text-align: center;">Some Centered Title</div>
    <div id="chart_container">
        <!-- THE CHART GOES HERE -->
    </div>
</div>
0
César León
$("#YOUR_GRAPH_WRAPPER svg text").first()
   .attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));

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

0
tkhuynh
$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})

//または

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

グラフの中央にグラフタイトルを表示するには、以下のコードスニペットを使用します。チャートコンテナーの中央に動的にタイトルを設定します。

readyイベントリスナーを追加します。 google.visualization.events.addListener(myChart, 'ready', titleCenter);および関数titleCenterを追加します。

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAxisTickColors);

var options = {
  title: "Chart Title",
  titleTextStyle: {
      bold: true,
      italic: true,
      fontSize: 18,
  },
  width: 600,
  height: 400,
  legend: { position: 'top', maxLines: 3 },
  bar: { groupWidth: '75%' },
  isStacked: true,
};

function drawAxisTickColors() {
    var data = google.visualization.arrayToDataTable([
      ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
       'Western', 'Literature', { role: 'annotation' } ],
      ['2010', 10, 24, 20, 32, 18, 5, ''],
      ['2020', 16, 22, 23, 30, 16, 9, ''],
      ['2030', 28, 19, 29, 30, 12, 13, '']
    ]);
    
    var myChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    google.visualization.events.addListener(myChart, 'ready', titleCenter);
    myChart.draw(data, options);
}

function titleCenter() {
    var $container = $('#chart_div');
    var svgWidth = $container.find('svg').width();
    var $titleElem = $container.find("text:contains(" + options.title + ")");
    var titleWidth = $titleElem.html().length * ($titleElem.attr('font-size')/2);
    var xAxisAlign = (svgWidth - titleWidth)/2;
    $titleElem.attr('x', xAxisAlign);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
0
Divyesh Prajapati