2013-03-06 101 views
0

我目前使用Highcharts圖形庫並試圖在線條和區域圖表的填充之間添加空格,但似乎找不到方法。任何人都有這樣的解決方案/黑客?在線條和填充Highcharts區域圖表之間添加空格

實際highcharts.js JavaScript黑客歡迎。

這是我有:

Current Graph

這裏就是我想實現:

enter image description here

不在於它會在所有幫助,但這裏是我當前的代碼:

var chart = new Highcharts.Chart({ 
    chart: { 
     type: 'area', 
     renderTo: 'test-trending-chart', 
     backgroundColor:'#5473B4', 
     spacingTop: 0, 
     spacingBottom: 0, 
     spacingLeft: 0, 
     spacingRight: 0, 
     marginLeft: -3, 
     marginRight: -3 
    }, 
    credits: { 
     enabled: false 
    }, 
    title: { 
     text: "" 
    }, 
    tooltip: { 
     enabled: false 
    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions:{ 
     area: { 
      shadow: false, 
      animation: false, 
      states: { 
       hover: { 
        enabled: false 
       } 
      }, 
      marker: { 
       lineColor: '#5473B4', 
       lineWidth: 2, 
       radius: 5 
      }, 
      lineWidth: 3, 
      fillColor: { 
       linearGradient: [0,0,0,100], 
       stops: [ 
        [0,'rgba(255,255,255,0.5)'], 
        [1,'rgba(255,255,255,0.75)'] 
       ] 
      } 
     } 
    }, 
    series: [{ 
     color: 'white', 
     data: [36,40,23,42,65] 
    }], 
    xAxis: { 
     lineWidth: 0, 
     minorGridLineWidth: 0, 
     lineColor: 'transparent',   
     labels: { 
      enabled: false 
     }, 
     minorTickLength: 0, 
     tickLength: 0 
    }, 
    yAxis: { 
     lineWidth: 0, 
     minorGridLineWidth: 0, 
     gridLineWidth: 0, 
     lineColor: 'transparent',   
     labels: { 
      enabled: false 
     }, 
     minorTickLength: 0, 
     tickLength: 0, 
     title: { 
      text: "" 
     } 
    } 
}); 

回答

2

編輯:更eleg螞蟻解決方案,不需要您編輯highcharts.js,而是使用原型來擴展Highcharts。下面的JavaScript片段添加到您的代碼實例化任何圖形前:

Highcharts.Series.prototype.drawGraph = (function (func) { 
     return function() { 
      func.apply(this, arguments); 
      if (typeof this.options.areaPadding !== "undefined"){ 
       for (i=2;i<this.areaPath.length;i+=3){ 
        this.areaPath[i]+=this.options.areaPadding; 
       } 
      } 
     }; 
    } (Highcharts.Series.prototype.drawGraph)); 

然後使用areaPadding參數,像這樣的線路和區域之間添加空格:

var chart = new Highcharts.Chart({ 
    plotOptions:{ 
     area: { 
      areaPadding: 4 
     } 
    } 
}); 

看到它在這裏的行動:http://jsfiddle.net/AAQEq/

+0

如果可能的話,您能否與我們分享更新的小提琴? – 2013-03-07 05:04:32

+0

@Gopinagh沒問題,JSFiddle添加到我的答案=) – MatthewKremer 2013-03-07 14:13:38

+0

謝謝@matthewKremer。 – 2013-03-08 02:57:35

相關問題