javascript 带有渐变问题的 Highcharts 中的样式条颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9472361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling bar colors in Highcharts with a gradient issue
提问by Mike Sweeney
I'm trying to color the bars in highcharts with a gradient. What I have is coloring them, but the problem is, the gradient is spreading through the other data groups rather than each individual bar, here's an example of what I mean:
我正在尝试使用渐变为 highcharts 中的条着色。我所拥有的是为它们着色，但问题是，渐变通过其他数据组而不是每个单独的条形传播，这是我的意思的示例：
If you notice, the gradient is being spread between the bars, rather than creating a new one for each.
如果您注意到，渐变是在条形之间传播的，而不是为每个条形创建一个新的。
To gradient them, I'm using:
为了渐变它们，我正在使用：
colors: [
{
linearGradient: [500, 0],
stops: [
[0, 'rgb(247, 111, 111)'],
[1, 'rgb(220, 54, 54)']
]
},
{
linearGradient: [500, 0],
stops: [
[0, 'rgb(120, 202, 248)'],
[1, 'rgb(46, 150, 208)']
]
},
{
linearGradient: [500, 0],
stops: [
[0, 'rgb(136, 219, 5)'],
[1, 'rgb(112, 180, 5)']
]
},],
回答by eolsson
There are two ways of specifying gradients in current version of highcharts. Previously you only had the option of using an array with four coordinates like linearGradient: [x1, y1, x2, y2]. This would make the gradient coordinates apply to pixels and therefor be used for all bars (as in your example).
在当前版本的 highcharts 中有两种指定梯度的方法。以前，您只能选择使用具有四个坐标的数组，例如linearGradient: [x1, y1, x2, y2]. 这将使渐变坐标应用于像素，因此可用于所有条形（如您的示例中所示）。
The new option is to use a configuration object instead:
新选项是使用配置对象：
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
}
The coordinates here are numbers between 0 and 1 which corresponds to each individual bar. So, if you change the array you used to be a config option (and use normalized coordinates) you will get gradients in each bar.
这里的坐标是 0 到 1 之间的数字，对应于每个单独的条形。因此，如果您更改曾经作为配置选项的数组（并使用标准化坐标），您将在每个条形中获得渐变。
Example on jsfiddle
jsfiddle示例
Screenshot:
截屏：
Edit:And as a bar chart have the x-axis going from top to bottom you should let x1 be 0 and x2 be 1, instead of changing y1 and y2.
编辑：作为条形图，x 轴从上到下，您应该让 x1 为 0，x2 为 1，而不是更改 y1 和 y2。
