使用渐变问题在Highcharts中设置条形颜色 [英] Styling bar colors in Highcharts with a gradient issue

问题描述

我正尝试用高度渐变的方式对高地图中的酒吧着色。我所拥有的是着色它们，但问题是，梯度正在通过其他数据组传播，而不是每个单独的栏，这里是我的意思的一个例子：

如果您注意到，渐变正在分布之间，而不是为每个创建一个新的。

要渐变它们，我使用：

 颜色：[
 {
 linearGradient：[500，0]，
 stops：[
 [0，' 
 [1，'rgb ：[500，0]，
停止：[
 [0，'rgb（120，202，248）']，
 [1，'rgb（46，150，208）' ] 
] 
}，
 {
 linearGradient：[500，0]，
 stops：[
 [0，'rgb（136，219， 5）']，
 [1，'rgb（112，180，5）'] 
] 
}，]，
  

解决方案

在当前版本的高图中有两种指定渐变的方法。以前，您只能选择使用具有四个坐标的数组，如 linearGradient：[x1，y1，x2，y2] 。这将使梯度坐标适用于像素，因此用于所有酒吧（如在您的示例中）。

新选项是使用配置对象：

  linearGradient：{
 x1：0，
 y1：0，
 x2：1， 
 y2：0 
} 
  

这里的坐标是介于0和1之间的数字这对应于每个单独的栏。所以，如果你改变了你曾经是一个配置选项的数组（并且使用标准坐标），你将会在每一个小节中获得渐变。

jsfiddle

截图：

编辑：
而条形图的x轴从上到下应该让x1为0，x2为1，而不是改变y1和y2。

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:

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)']
        ]
    },],

解决方案

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).

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.

Example on 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.

这篇关于使用渐变问题在Highcharts中设置条形颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！