在谷歌圖表的AreaChart中添加字幕？

我已經使用Google Chart（谷歌可視化）成功實現了AreaChart，但現在我需要在Google AreaChart中添加字幕。這裏是我試過的代碼。在谷歌圖表的AreaChart中添加字幕？

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

來源

2017-01-27 Rahul Chaube

chart.subtitle只適用於材料圖表

材料圖表中使用packages: ['bar', 'line', 'scatter']
和namespce - >google.charts

遺憾的是，沒有材料版本面積圖表.. 。

chart.subtitle不提供給核心圖表

核心圖表中使用packages: ['corechart']
和namespce - >google.visualization

但你可以嘗試添加自己的字幕，當'ready'事件發生時

看到下面的工作片段...

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>

來源

2017-01-27 12:49:12 WhiteHat

由於它的工作，我也想改變字幕 –

'subtitle.setAttribute（「字體大小」的字體樣式和大小。 ..）'＆'subtitle.setAttribute（'font-family'，...）' – WhiteHat

在谷歌圖表的AreaChart中添加字幕？

回答

相關問題