反应高图的折线图填充图表

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

Please notice how values on your x axis changed. Line chart adjust extremes using minimum and maximum value. Area chart has additional parameter threshold (http://api.highcharts.com/highcharts/plotOptions.area.threshold) that specifies where the area should start. It's 0 by default.

You can find the minimum in your data and set threshold like this:

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

Live working example: http://jsfiddle.net/kkulig/fznqthhw/