[英]Gradient background bars in Highchart bar chart
My problem is changing background bars in a highchart bar chart. 我的问题是更改高图表条形图中的背景条。 I can change bars to a specific color like below but I want to make it gradient. 我可以将条形更改为如下所示的特定颜色,但我想使其渐变。
In this code I used red color (FF0000) in chart options. 在此代码中,我在图表选项中使用了红色(FF0000)。 How to change it for gradient backgroud? 如何更改渐变背景?
HTML : HTML:
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
JS : JS:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
colors: [
'#ff0000'
],
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [10, 31, 63, 3, 28]
}]
});
});
Please refer above fiddle to check the results 请参考上面的小提琴检查结果
First, declare a gradient as per Highcharts 首先,根据Highcharts声明一个渐变
const color_grad1 = {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#fdfc47'],
[1, '#24fe41']
]
};
Then use gradient as follows: 然后使用渐变,如下所示:
data: [{y: 10, color: color_grad1}, 31, 63, 3, 28]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.