在样条曲线下方的Highcharts网格线高度

Question

我有一个使用样条线的高图,并希望将网格线保持在样条线下方,以便每个网格线都与样条线相交,但不会再进一步​​.这可能吗？

我找到了这篇文章,但我不确定如何修改它来做我想要的. Highcharts - 网格线高度

    $(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();            }


    }); 

  });

Answer 1

我已经更新了你的代码,你可以在这里看到它

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

所以我添加一个idyAxis并column输入新的系列,将系列的列宽设置为1 px并将系列链接到相同的yAxis.

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

如果它能满足您的需求,请告诉我