居中对齐标题谷歌图表答案

【问题标题】：Center Align Title Google Chart居中对齐标题谷歌图表
【发布时间】：2012-06-29 17:26:17
【问题描述】：

如何在 Google Charts API（不是 Google Chart Images）的折线图中将标题居中

我没有看到任何选项，例如 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);
}

【问题讨论】：

Google Charts: Pie Chart title position的可能重复
这似乎是一个明智的解决方法：Center align title in Google Chart

标签： javascript api charts center

【解决方案1】：

the API不提供此选项；你根本做不到。

【讨论】：

【解决方案2】：

我使用：标题位置：'无'

并插入一个普通 HTML 的标题

【讨论】：

【解决方案3】：

Another answer 建议如下：

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

来源：https://stackoverflow.com/a/16291236/364

【讨论】：

【解决方案4】：

$("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));

【讨论】：

【解决方案5】：

绘制完图表后，调用事件处理函数：

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。

【讨论】：

但不是响应式的。

【解决方案6】：

您可以在绘制图表后使用图表中的回调信息轻松完成此操作，并对 div 中的某些文本进行一些数学运算。

将您的图表包含在一个位置：相对 div 中。在图表下方添加一个 div 并将其和图表绝对定位。

然后你可以用一点高中数学来移动 div 的顶部和左侧位置。

<https://jsfiddle.net/o6zmbLvk/2/>

【讨论】：

【解决方案7】：

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

See my explanation here

【讨论】：

【解决方案8】：

要在图表中心显示图表标题，请使用以下代码 sn-p;它将在图表容器的中心动态设置标题。

添加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>

【讨论】：

我们如何在多个图表上使用相同的标题对齐方式

【解决方案9】：

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

【讨论】：

【解决方案10】：

正如前面的回答所说，你不能配置一个居中的标题。只是不要设置任何“标题”配置。默认不显示。

然后你可以用HTML设置标题，一些代码：

<div>
    <div style="text-align: center;">Some Centered Title</div>
    <div id="chart_container">
        <!-- THE CHART GOES HERE -->
    </div>
</div>

【讨论】：

【解决方案11】：

中心图表图块
根据标题长度动态调整
与 google.visualization.LineChart 中的标题重叠（未使用其他类型的图表进行测试）

所有这些都在 1 个 CSS 类和 4 行 JavaScript 中。

Answered here

【讨论】：

【解决方案12】：

document.getElementById('divid').getElementsByTagName('text')[0].setAttribute('x', '350')

【讨论】：

嗨丹尼尔，你能在这个答案中添加任何支持文本吗？解释其工作原理，并可能链接到支持 API 文档。
请描述您的代码的作用。

【解决方案13】：

svg > g:first-of-type > text {
    transform: translateX(calc(50% - 150px));
}

【讨论】：

请添加一些说明，说明您的代码的作用以及建议的原因。
虽然此代码可以解决 OP 的问题，但最好包含有关您的代码如何解决 OP 问题的说明。这样，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。高质量、完整的答案强化了这一想法，并且更有可能获得支持。这些功能，加上所有帖子都是独立的要求，是 SO 作为一个使我们与论坛区分开来的平台的一些优势。您可以编辑以添加其他信息和/或使用源文档补充您的解释。