web-dev-qa-db-de.com

Zentrieren Sie den Titel mit Google Chart

Wie kann ich den Titel in einem Liniendiagramm über die Google Charts-API zentrieren (nicht Google Chart-Bilder)

Ich sehe keine Optionen wie titlePosition: 'center'

Vielen Dank!

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

Das

16
Turnercj65

Diese Option wird nicht von der API angeboten; Sie können das einfach nicht tun.

Ich verwende: TitlePosition: 'none'

Und füge einen Titel mit normalem HTML ein

10
Werner

Eine andere Antwort schlägt etwas wie das Folgende vor:

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

Quelle: https://stackoverflow.com/a/16291236/364

4
Matt Mitchell

Rufen Sie nach dem Zeichnen des Diagramms die Ereignisbehandlungsfunktion auf:

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

Und definieren Sie die Funktion als:

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

Fügen Sie einfach den Titel Ihres Diagramms ein und fügen Sie die Attribute X:500, y:141 hinzu. 

2
Anuja Saravanan

Sie können dies ganz einfach mit den Rückrufinformationen aus dem Diagramm tun, nachdem sie gezeichnet wurden, und mit etwas Mathe an etwas Text in einem div arbeiten.

Enthalten Sie Ihr Diagramm in einer Position: relative div. Fügen Sie ein div unter dem Diagramm hinzu und positionieren Sie es und das Diagramm absolut.

Dann können Sie die oberen und linken Positionen des DIV mit ein wenig High-School-Mathematik verschieben.

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

Erstellen Sie diese Funktion in einem Skript und rufen Sie nach dem Zeichnen des Diagramms auf:

google.visualization.events.addListener(chart, 'ready', Title_center("Test success"));
0
Gopal Singh

Wie in der vorherigen Antwort angegeben, können Sie keinen zentrierten Titel konfigurieren. Setze einfach keine "Titel" -Konfiguration. Standardmäßig wird es nicht angezeigt.

Dann können Sie einen Titel mit HTML-Code festlegen:

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

Siehe meine Erklärung hier

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

//ODER

$("#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

Um den Diagrammtitel in der Mitte des Diagramms anzuzeigen, verwenden Sie den folgenden Codeausschnitt. Der Titel wird dynamisch in der Mitte des Diagrammcontainers festgelegt.

ready Ereignis-Listener hinzufügen; google.visualization.events.addListener(myChart, 'ready', titleCenter); und fügen Sie die Funktion titleCenter hinzu.

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