漸變填充react-highcharts的折線圖

Question

我已經使用react-highcharts創建了折線圖。這就是它的外觀：。現在，我想線下加色填充漸變，這是我在做什麼：

render() { 
    let config = { 
    chart: { 
     animation: { 
     duration: 1000 
     } 
    }, 
    plotOptions: { 
     area: { 
     lineWidth: 1, 
     marker: { 
      enabled: false, 
      states: { 
      hover: { 
       enabled: true, 
       radius: 5 
      } 
      } 
     }, 
     shadow: false, 
     states: { 
      hover: { 
      lineWidth: 1 
      } 
     } 
     } 
    }, 
    rangeSelector: { 
     buttons: [{ 
     type: 'month', 
     count: 1, 
     text: '1m' 
     }, { 
     type: 'month', 
     count: 3, 
     text: '3m' 
     }, { 
     type: 'month', 
     count: 6, 
     text: '6m' 
     }, { 
     type: 'year', 
     count: 1, 
     text: '1y' 
     }, { 
     type: 'all', 
     text: 'All' 
     }], 
     selected: 0, 
     inputEnabled: false, 
    }, 
    title: { 
     text: 'Progress Chart' 
    }, 
    series: [{ 
     name: 'Account Balance', 
     data: this.getProgressData(), 
     type: 'area', 
     fillColor: { 
     linearGradient: [0, 0, 0, 300], 
     stops: [ 
      [0, '#4286f4'], 
      [1, '#ffffff'] 
     ] 
     }, 
     tooltip: { 
     valueDecimals: 2 
     } 
    }], 
    yAxis: { gridLineWidth: 0 }, 
    xAxis: { gridLineWidth: 2 }, 
    }; 

    return(
    <div> 
     <ReactHighstock config={config}/> 
    </div> 
) 
} 

我得到的梯度工作，但問題是我得到一個平坦的圖表沒有長槍，這樣：。我希望我的圖表看起來像前一個，但是使用漸變色填充。

Answer 1

請注意x軸上的值是如何改變的。折線圖使用最小值和最大值調整極值。面積圖有額外的參數threshold（http://api.highcharts.com/highcharts/plotOptions.area.threshold），指定區域應該開始的地方。它默認爲0。

您可以在您的數據最小和設定的閾值是這樣的：

var data = [50, 71.5]; 
(...) 
// chart options 
threshold: Math.min(...data) 

現場工作示例：http://jsfiddle.net/kkulig/fznqthhw/