jquery - Highcharts网格线高度低于样条线

我有一个使用样条线的图表，希望将网格线保持在样条线以下，以使每个网格线都与样条线相交，但不再进行下去。这可能吗？

我找到了这篇文章，但不确定如何修改它以完成我想要的事情。 Highcharts - Grid line height

    $(function () {


Highcharts.theme = {
   colors: ["#0085e1"],
   chart: {
       backgroundColor: "transparent"
   },

   tooltip: {
  backgroundColor: '#0085e1',
  style: {
     color: '#ffffff'
  }
   },



};
(function(H) {
H.wrap(H.Tick.prototype, 'render', function(p, index, old, opacity) {
    var tick = this,
        d,
        size = 0.25; // = 75%, 0.5 = 50%, 0.75 = 25% etc.
    p.call(this, index, old, opacity);

    if(tick.gridLine && this.axis.isXAxis) {

        d = tick.gridLine.d.split(' '); // get default path
        console.log(d[5]);
        d[2] = ( d[5] - d[2] ) * size + tick.axis.chart.plotTop; // modify path - don't forget about plotTop
        tick.gridLine.attr({
            d: d // apply new path
        });
    }

});
})(Highcharts)

Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({lang: {  thousandsSep: ','}});

$('#homechart').highcharts({
     chart: {
        type: 'spline',

    },
    title: {
        text: '',
        x: -20 //center
    },
    legend: {
        enable: false
    },
    xAxis: {
        categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
        gridLineWidth: 0,
        gridLineColor: '#e5f2fd',
         minorTickWidth: 0
    },
    yAxis: {
          title: {
            text: null
        },
        labels: {
          enabled: false
        },
        gridLineColor: 'transparent'
    },
    tooltip: {
        formatter:function(){
            var nosheets = this.y.toLocaleString();
                return  nosheets + ' sheets';
        },
        borderRadius: 20,
        style: {
          padding: 5
        }
    },

    plotOptions: {
        spline: {

              marker: {
                radius: 5,
                lineColor: '#0085e1',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: 'Sheets',
        data: [0, 1000, 835000, 5100000, 15300000, 33400000]
    }]
});
});

var text = $("text");
text.each(function(index, domElement) {
        var $element = $(domElement);

        if ($element.text() === "Highcharts.com") {
            $element.hide();            }


    });

  });

最佳答案

我已经更新了您的代码，您可以看到它here

这是一种解决方法，我认为不可能用highcharts来做这样的事情。

因此，我将id添加到yAxis中，并column键入新的序列，将序列的列宽设置为1 px，然后将序列链接到相同的yAxis。

type: 'column',
color: '#C2C2C2',
yAxis: 1,

让我知道它是否可以满足您的需求