在谷歌图表的AreaChart添加字幕? [英] Add subtitle in AreaChart in google chart?
问题描述
我已经使用Google Chart(谷歌可视化)成功实施了AreaChart,但现在我需要在Google AreaChart中添加字幕。这里是我试过的代码。
var options = {
width:310,
height:260,
图表: {
title:'Company Performance',
subtitle:'Sales,Expenses,and Profit:2014-2017',
},
backgroundColor:'#000000'
};
材质图表使用 不幸的是,没有 material 版面积图... chart.subtitle
仅适用于材质图表
包:['bar','line','scatter']
和namespce - > google.charts
chart.subtitle
不适用于核心图表
$ b $ p core 图表使用 packages:['corechart']
和namespce - > google.visualization
但您可以尝试添加自己的字幕,当'ready'
事件触发时
请参阅以下工作片段...
google.charts.load('current',{callback:function(){var data = new google.visualization.DataTable国家,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(数据,选项); },packages:['corechart']});
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
is only available to material charts
material charts use packages: ['bar', 'line', 'scatter']
and namespce --> google.charts
unfortunately, no material version of area charts...
chart.subtitle
is not available to core charts
core charts use packages: ['corechart']
and namespce --> google.visualization
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>
这篇关于在谷歌图表的AreaChart添加字幕?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!