0
我有两种类型的注释,一种有链接,另一种没有。我想用不同的颜色为它们着色。可能吗?谷歌图表中注释的不同颜色
型1 -
{ v: 'sample', Link: 'some link }
型2 -
{ v: 'sample', }
我想在其他一些色彩和type2上色TYPE1,这可能吗?
我有两种类型的注释,一种有链接,另一种没有。我想用不同的颜色为它们着色。可能吗?谷歌图表中注释的不同颜色
型1 -
{ v: 'sample', Link: 'some link }
型2 -
{ v: 'sample', }
我想在其他一些色彩和type2上色TYPE1,这可能吗?
你可以风格的注解整体图,
或每个系列分别
看到下面的工作片段,
的fontSize
设置为10
所有注释
则颜色会改变的个别系列
google.charts.load('current', {
callback: drawStacked,
packages: ['corechart']
});
function drawStacked() {
var data = new google.visualization.arrayToDataTable([
['Month', 'A', {role: 'annotation'}, 'B', {role: 'annotation'}],
['Aug', 3754, '3,754', 2089, '2,089'],
['Sept', 900, '900', 200, '200'],
['Oct', 2000, '2,000', 4900, '4,900'],
['Nov', 1700, '1,700', 2200, '2,200'],
['Dec', 2400, '2,400', 2089, '2,089']
]);
var options = {
annotations: {
textStyle: {
fontSize: 10
}
},
series: {
0: {
annotations: {
stem: {
color: 'cyan',
length: 5
},
textStyle: {
color: 'cyan'
}
}
},
1: {
annotations: {
stem: {
color: 'magenta',
length: 10
},
textStyle: {
color: 'magenta'
}
}
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
编辑
有注解不同的颜色在一个系列中,
需要手动更改颜色当'ready'
事件触发
看到下面的工作片段...
google.charts.load('current', {
callback: drawStacked,
packages: ['corechart']
});
function drawStacked() {
var data = new google.visualization.arrayToDataTable([
['Month', 'A', {role: 'annotation'}],
['Aug', 3754, '3,754'],
['Sept', {v: 900, p: {link: 'type A'}}, '900'],
['Oct', {v: 2000, p: {link: 'type B'}}, '2,000'],
['Nov', 1700, '1,700'],
['Dec', 2400, '2,400']
]);
var options = {
annotations: {
textStyle: {
color: '#000000',
fontSize: 10
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function() {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
for (var i = 0; i < data.getNumberOfRows(); i++) {
if ((text.getAttribute('text-anchor') === 'middle') && (text.innerHTML === data.getFormattedValue(i, 1))) {
switch (data.getProperty(i, 1, 'link')) {
case 'type A':
text.setAttribute('fill', 'magenta');
break;
case 'type B':
text.setAttribute('fill', 'cyan');
break;
}
}
}
});
});
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
希望这可以帮助,请参阅[配置选项](https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options)所有可以调整的设置... – WhiteHat
问题这里是我没有任何系列,但只有一个条形图 – madhur
看到__EDIT__以上答案... – WhiteHat