Highcharts中的样式栏颜色与渐变问题

Question

我试图用渐变色调高图中的条形.我所拥有的是为它们着色,但问题是,渐变是通过其他数据组而不是每个单独的条形扩展,这是我的意思的一个例子:

如果您注意到,渐变在条形图之间传播,而不是为每个条形图创建一个新的渐变.

为了渐变它们,我正在使用:

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

Answer 1

在当前版本的highcharts中有两种指定渐变的方法.以前你只能选择使用四个坐标的数组linearGradient: [x1, y1, x2, y2].这将使渐变坐标适用于像素,因此可用于所有条形(如示例中所示).

新选项是使用配置对象:

linearGradient: {
     x1: 0,
     y1: 0,
     x2: 1,
     y2: 0
}

这里的坐标是0到1之间的数字,对应于每个单独的条.因此,如果您更改过去曾经是配置选项的数组(并使用标准化坐标),您将在每个条形图中获得渐变.

关于jsfiddle的例子

截图:

编辑: 作为条形图,x轴从上到下,你应该让x1为0,x2为1,而不是改变y1和y2.