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網格線高度低於樣條線

回答

相關問題