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/

react-highcharts 折线图的渐变填充

Gradient fill for react-highcharts' line chart

javascript

reactjs

charts

highcharts

react-highcharts