如何用渐变颜色填充GoogleCharts AreaChart中的区域? [英] How fill area in GoogleCharts AreaChart with gradient color?
问题描述
在我的Google图表中，我使用以下选项:
chartOptions: {
hAxis: {
title: 'Tasks'
},
vAxis: {
title: 'Duration'
},
animation:{
duration: 2000,
startup: true
},
colors: ['#6f9654']
}
如何更改图形下区域的颜色，以及如何用渐变填充它? (我不想填充整个图表的背景)
到目前为止，我在Google文档中找不到任何文档.可能吗?有招吗?
更新:@ whiteHats解决方案的结果以及我的修改:
图表区域的渐变填充没有选项，
但您可以添加自己的...
首先，将您的渐变定义添加到html的某个位置.
此元素不应用display: none，
隐藏
否则，某些浏览器可能会忽略它.
将尺寸设置为零像素似乎可行.
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="my-gradient" x2="1" y2="1">
<stop offset="0%" stop-color="#447799" />
<stop offset="50%" stop-color="#224488" />
<stop offset="100%" stop-color="#112266" />
</linearGradient>
</svg>
接下来，我们需要能够识别构成图表区域的<rect>元素.
在这里，使用默认的背景色.
var chartOptions = {
chartArea: {
backgroundColor: '#447799'
},
...
然后找到具有默认背景的<rect>元素，并设置fill属性.
通常，我们可以在图表的'ready'事件中设置渐变填充，
但是由于您使用的是动画，因此渐变会在动画发生时被覆盖.
我们还可以在图表的'animationfinish'事件中设置填充，
但是动画期间不会出现渐变.
MutationObserver，并在每次svg发生突变(绘制)时设置填充.
请参阅以下工作片段...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'number'},
{label: 'y', type: 'number'}
],
rows: [
{c:[{v: 0}, {v: 25}]},
{c:[{v: 5}, {v: 25}]},
{c:[{v: 10}, {v: 25}]},
{c:[{v: 15}, {v: 25}]},
{c:[{v: 20}, {v: 25}]},
{c:[{v: 25}, {v: 25}]},
{c:[{v: 30}, {v: 25}]},
{c:[{v: 40}, {v: 25}]},
{c:[{v: 45}, {v: 25}]},
{c:[{v: 50}, {v: 25}]},
{c:[{v: 55}, {v: 25}]},
{c:[{v: 60}, {v: 25}]},
{c:[{v: 65}, {v: 25}]},
{c:[{v: 70}, {v: 25}]}
]
});
var chartOptions = {
chartArea: {
backgroundColor: '#447799'
},
height: 600,
hAxis: {
title: 'Tasks'
},
vAxis: {
title: 'Duration'
},
animation:{
duration: 2000,
startup: true
},
colors: ['#6f9654']
};
var container = document.getElementById("chart_div");
var chart = new google.visualization.AreaChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
container.getElementsByTagName('svg')[0].setAttribute('xmlns', 'http://www.w3.org/2000/svg');
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
if (rect.getAttribute('fill') === '#447799') {
rect.setAttribute('fill', 'url(#my-gradient) #447799');
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(dataTable, chartOptions);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="my-gradient" x2="1" y2="1">
<stop offset="0%" stop-color="#447799" />
<stop offset="50%" stop-color="#224488" />
<stop offset="100%" stop-color="#112266" />
</linearGradient>
</svg>
With my google Chart I use this options:
chartOptions: {
hAxis: {
title: 'Tasks'
},
vAxis: {
title: 'Duration'
},
animation:{
duration: 2000,
startup: true
},
colors: ['#6f9654']
}
How Can I change the color of the area under the graph and how can I fill it with a gradient? (I don't want to fill the background of the whole diagramm)
I don't find any docs on google documentation so far. Is it even possible? Is there a trick?
UPDATE: The Result on @whiteHats solution with my adaptations.:
no options for gradient fill of the chart area,
but you can add your own...
first, add your gradient definition to the html somewhere.
this element should not be hidden with display: none,
otherwise, some browsers may ignore it.
setting the size to zero pixels seems to work.
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="my-gradient" x2="1" y2="1">
<stop offset="0%" stop-color="#447799" />
<stop offset="50%" stop-color="#224488" />
<stop offset="100%" stop-color="#112266" />
</linearGradient>
</svg>
next, we need to be able to identify the <rect> element that makes up the chart area.
here, a default background color is used.
var chartOptions = {
chartArea: {
backgroundColor: '#447799'
},
...
then we find the <rect> element with the default background, and set the fill attribute.
normally, we could set the gradient fill on the chart's 'ready' event,
but since you're using animation, the gradient will get overridden as the animation occurs.
we could also set the fill on the chart's 'animationfinish' event,
but then there would not be a gradient during animation.
as such, we have to use a MutationObserver, and set the fill every time the svg is mutated (drawn).
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'number'},
{label: 'y', type: 'number'}
],
rows: [
{c:[{v: 0}, {v: 25}]},
{c:[{v: 5}, {v: 25}]},
{c:[{v: 10}, {v: 25}]},
{c:[{v: 15}, {v: 25}]},
{c:[{v: 20}, {v: 25}]},
{c:[{v: 25}, {v: 25}]},
{c:[{v: 30}, {v: 25}]},
{c:[{v: 40}, {v: 25}]},
{c:[{v: 45}, {v: 25}]},
{c:[{v: 50}, {v: 25}]},
{c:[{v: 55}, {v: 25}]},
{c:[{v: 60}, {v: 25}]},
{c:[{v: 65}, {v: 25}]},
{c:[{v: 70}, {v: 25}]}
]
});
var chartOptions = {
chartArea: {
backgroundColor: '#447799'
},
height: 600,
hAxis: {
title: 'Tasks'
},
vAxis: {
title: 'Duration'
},
animation:{
duration: 2000,
startup: true
},
colors: ['#6f9654']
};
var container = document.getElementById("chart_div");
var chart = new google.visualization.AreaChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
container.getElementsByTagName('svg')[0].setAttribute('xmlns', 'http://www.w3.org/2000/svg');
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
if (rect.getAttribute('fill') === '#447799') {
rect.setAttribute('fill', 'url(#my-gradient) #447799');
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(dataTable, chartOptions);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="my-gradient" x2="1" y2="1">
<stop offset="0%" stop-color="#447799" />
<stop offset="50%" stop-color="#224488" />
<stop offset="100%" stop-color="#112266" />
</linearGradient>
</svg>
这篇关于如何用渐变颜色填充GoogleCharts AreaChart中的区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
