Highcharts网格线高度低于样条线

我有一个使用样条线的高图，并希望将网格线保留在样条线以下，以便每个网格线满足样条线但不会进一步。这可能吗？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();   } 


    }); 

    });

来源

2016-06-08 plumwd

您可以添加在这里你的代码或小提琴来说明这个问题。 –

@plumwd''不再进一步'是什么意思？ – IsraGab

你的意思是你只想在你的样条线下面显示灰线？ – IsraGab

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

这是一个解决办法，我不认为这是可以做到这样的事情与highcharts。

因此，我将一个id添加到yAxis和column类型的新系列，将系列的列宽设置为1 px并将系列连接到相同的yAxis。

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

让我知道这是否能满足您的需求

来源

2016-06-08 22:58:14 IsraGab

@plumwd我更新了我的小提琴并设置了一个'z-index'，所以列系列将隐藏样条线 – IsraGab

很好的解决方法！ –

是的，这是美丽的，正是我想要做的。 – plumwd

Highcharts网格线高度低于样条线

回答

相关问题