Css 如何使用highcharts实现此图形

我怎样才能使下面的图表尽可能准确

我试图用highcharts实现下图中的图表，我的问题是我无法实现渐变和紫色切割线

这就是我到目前为止所做的：

---

该行由

DashStyle

属性实现：

渐变填充是在

fillColor

属性中定义渐变停止点的问题：

---

（尽管如此，FWIW，渐变的极端白色末端确实会分散注意力……

线条是通过

DashStyle

属性实现的：

渐变填充是在

fillColor

属性中定义渐变停止点的问题：

---

（尽管如此，FWIW，渐变的极端白色末端确实让人分心…

非常感谢你的回答，在我应用了DashStyle之后，我仍然有那条线下的区域，你知道如何删除数据的特定区域吗？NVM，通过更改每个数据的类型我无法实现渐变，你觉得你能帮我举一个例子来说明如何获得梯度吗？非常感谢你的回答，在我应用DashStyle后，我仍然有那条线下的区域，你知道如何删除数据的特定区域吗？NVM，通过更改每个数据的类型来解决我无法实现梯度，你能帮我举一个例子说明如何得到梯度吗？

$(function () {
    $('#container').highcharts({
    chart: {
      type: 'areaspline'
    },
  options: {
    title: {
      text: "Historical report"
    },
    heigth: 200

  },
  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 150,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  },
  xAxis: {
    categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    plotBands: [
      {
        from: 4.5,
        to: 6.5,
        color: 'rgba(68, 170, 213, .2)'
      }
    ]
  },
  yAxis: {
    title: {
      text: 'Fruit units'
    }
  },
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    areaspline: {
      fillOpacity: 0.5
    }
  },
  series: [
    {
      name: 'John',
      data: [3, 9, null, 5, 4, 10, 12],
      lineColor: "#5A66AF"
    }, {
      name: 'Jane',
      data: [1, 10, null, 3, 3, 5, 4],
      lineColor: '#47a06b'
    }, {
      name: 'Roberto',
      data: [10, 15, null, 15, 9, 9, 4],
      lineColor: '#2ba9db'
    }
  ]
});

});