在 Google 图表的 AreaChart 中添加副标题? [英] Add subtitle in AreaChart in google chart?

问题描述

我已经使用谷歌图表(google-visualization)成功实现了AreaChart，但现在我需要在谷歌AreaChart中添加副标题.这是我尝试过的代码.

I have successfully implemented AreaChart using google Chart(google-visualization),but now my need to add subtitle in the google AreaChart. Here the code which i have tried.

           var options = {
            width: 310,
            height: 260,
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
           backgroundColor: '#000000'
        };

推荐答案

chart.subtitle 仅适用于 material 图表

material 图表使用 packages: ['bar', 'line', 'scatter']
和命名空间 --> google.charts

不幸的是，没有材料版本的面积图...

unfortunately, no material version of area charts...

chart.subtitle 不可用于核心图表

core 图表使用包:['corechart']
和命名空间 --> google.visualization

但是您可以尝试添加自己的字幕，当 'ready' 事件触发时

but you could try adding your own subtitle, when the 'ready' event fires

请参阅以下工作片段...

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "Country", "type": "string"},
        {"label": "Value", "type": "number"}
      ],
      "rows": [
        {"c": [{"v": "Canada"}, {"v": 33}]},
        {"c": [{"v": "Mexico"}, {"v": 33}]},
        {"c": [{"v": "USA"}, {"v": 34}]}
      ]
    });

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.AreaChart(container);
    var options = {
      height: 400,
      legend: {
        position: 'labeled'
      },
      sliceVisibilityThreshold: 0,
      title: 'Title',
      width: 600
    };

    google.visualization.events.addListener(chart, 'ready', function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(label) {
        if (label.innerHTML === options.title) {
          var subtitle = label.parentNode.appendChild(label.cloneNode(true));
          subtitle.innerHTML = 'Subtitle';
          subtitle.setAttribute('y', parseFloat(label.getAttribute('y')) + 20);
        }
      });
    });

    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

这篇关于在 Google 图表的 AreaChart 中添加副标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！