设置自定义图像从底部到顶部条形图的内部条形（使用高图）？

Question

所以我在条形图（图表库 highcharts）中添加了自定义图像。但是图像是从上到下填充的，所以底部的图像被切割但x轴（下图）。

bar graph with custom image

到目前为止我写的代码

var redrawEnabled = true,
        ctr = 0;
        Highcharts.chart('container', {
            chart: {
                type: 'column',
                events: {
                    load: function(){
                        if(this.options.chart.type == 'column'){
                            this.xAxis[0].update({
                            reversed: false
                        });
                        }
                    },
                render: function() {
                    if (redrawEnabled) {
                        redrawEnabled = false;
                        var chart = this,
                            renderer = chart.renderer;
                            
                            chart.series[0].points.forEach(function(p) {
                            
                            var widthRatio = p.shapeArgs.width / p.shapeArgs.height
                            id = 'pattern-' + p.index + '-' + ctr;

                            var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
                            width: 1,
                            height: widthRatio,
                            id: id,
                            patternContentUnits: 'objectBoundingBox'
                            });
                            renderer.image('coin6.png', 0, 0, 1, widthRatio).attr({}).add(pattern);

                            p.update({
                            color: 'url(#' + id + ')'
                            }, false);
                        });

                        ctr++;
                        chart.redraw();
                        redrawEnabled = true;
                    }
                }
            },

            },
            title: {
                text: null
            },
            legend:{ enabled:false },
            
            xAxis: {
                labels: {
                style: {
                        color: 'red',
                        fontSize:'10px'
                    }
                },
                categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
                ],
                crosshair: false,
            },
            yAxis: {
                min: 0,
                tickLength: 0,
                visible: false,
            },
            plotOptions: {
                bar: {
                    stacking: 'normal',
                },
                
            },
            series: [{
                pointWidth: 30,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 144.0, 176.0, 135.6, 148.5,]
            }]
            });

1st :- 所以我想从底部开始图像，使其在底部看起来相似。所以我希望图像模式从下到上流动。 2nd :- 我可以对图像图案应用填充和边距，以便我可以正确堆叠硬币图像

我想实现硬币堆栈作为附加的图像。 final result I want to achieve

Answer 1

您可以使用xAxis.offset 功能来增加此空间。

   xAxis: {
     labels: {
       style: {
         color: 'red',
         fontSize: '10px'
       }
     },
         offset: 50,
     categories: [
       'Jan',
       'Feb',
       'Mar',
       'Apr',
       'May',
       'Jun',
       'Jul',
       'Aug',
       'Sep',
       'Oct',
       'Nov',
       'Dec'
     ],
     crosshair: false,
   },

演示：https://jsfiddle.net/BlackLabel/0wqnbtdz/

API：https://api.highcharts.com/highcharts/xAxis.offset