jquery - 如何在highcharts中实现条形图的线性渐变

Question

我使用 highcharts 创建了一个条形图，并且条形填充颜色需要提供 lienar 渐变。不确定如何设置线性渐变。如果有人有想法，你能帮帮我吗？

我的期望:

我尝试过的:

 $(function () {
    $('#ao-mix-allocation').highcharts({
        chart: {
            type: 'column',
            spacingBottom: 0,
            spacingTop: 0,
            spacingLeft: 0,
            spacingRight: 0,
            events: {
                load: function () {
                    this.xAxis[0].setExtremes(0, 5);
                }
            }
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },

        legend: {
            enabled: false
        },
        xAxis: {
            min:0,
            categories: [
                'S1',
                'S2',
                'S3',
                'S4',
                'S5',
                'S6',
                'S7',
                'S8',
                'S9',
                'S10',
                'S11',
                'S12',

            ],
            crosshair: false,
            gridLineWidth: 0,
            tickWidth: 0
        },
        yAxis: {
            min: 0,
            max: 150,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            enabled: false
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                width: 11,
                //stacking: 'normal',
                //grouping: true
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, '#0058a5'],
                        [1, '#3f85c8']
                    ]
                }

            },

        },
        series: AoMixAllocationData()
    });

JSFIDDLE 是 here

提前致谢!!

Answer 1

你快到了。尝试使用 linearGradient。这是我编辑的jsfiddle它在一个栏中从上到下显示两种不同的颜色。引用这个API详细了解其工作原理。