我的问题是更改 Highcharts 条形图中的背景条。我可以将条形图更改为特定颜色,如下所示,但我想将其设置为渐变色。
在此代码中,我在图表选项中使用了红色 (FF0000)。如何更改为渐变背景?
HTML :
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
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]
}]
});
});
最佳答案
请引用上面的 fiddle 检查结果
首先,按照 Highcharts 声明一个渐变
const color_grad1 = {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#fdfc47'],
[1, '#24fe41']
]
};
然后使用渐变如下:
data: [{y: 10, color: color_grad1}, 31, 63, 3, 28]
关于javascript - Highchart 条形图中的渐变背景条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36590225/