gpt4 book ai didi

javascript - 在谷歌图表的 AreaChart 中添加副标题?

转载 作者:行者123 更新时间:2023-11-29 19:23:27 25 4
gpt4 key购买 nike

我已经使用谷歌图表(谷歌可视化)成功实现了 AreaChart,但现在我需要在谷歌 AreaChart 中添加副标题。这是我试过的代码。

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

最佳答案

chart.subtitle 仅适用于material 图表

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

不幸的是,没有面积图的 Material 版本...


chart.subtitle不适用于核心图表

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


但是当 'ready' 事件触发时,您可以尝试添加自己的副标题

请参阅以下工作 fragment ...

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>

关于javascript - 在谷歌图表的 AreaChart 中添加副标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41893055/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com