将区域渐变添加到线高图

Question

我正在尝试向我的 highchart 添加一个区域渐变，类似于区域或 areaspline 图表。不幸的是，我不能使用它们，因为它们往往会使我的图表看起来无趣，因为我的数据通常在 3 左右的差异之间变化。这是我的代码笔：https://codepen.io/gabedesigns/pen/GXZPqg?editors=1111，这里是一些示例代码：

    $('#Platinum').highcharts('StockChart', {
    colors: ['#E48701'],
    scrollbar: {
      enabled: false
    },
    rangeSelector: {
      enabled: false
    },
    navigator: {
      enabled: true
    },
   yAxis: {
      labels: {
        format: '${value:,.0f}'
              },
    title: {
      text: 'Platinum'
    },
    series: [{
      name: 'Price',
      data: [787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 787, 787, 786, 786, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 786, 786, 787, 787, 787, 788, 787, 787, 788, 788, 787, 787, 787, 787, 787, 787, 788, 787, 787, 787, 787, 787, 787, 786, 787, 786, 786, 786, 785, 785, 785, 785, 785, 785, 785, 785, 785, 785, 786, 785, 785, 785, 785, 784, 785, 785, 784, 785, 784, 784, 784, 785, 785, 785, 785, 785, 785, 785, 784],
      tooltip: {
        valueDecimals: 0
      }
    }]
  });

我查看了此处和文档中的各种示例，但图表都是面积图、区域样条图或样条图。我的必须是线型图表，否则事情开始看起来很无聊。

编辑： 我不清楚我想要达到的目标。基本上我想要线条下的渐变效果就像面积图一样，但遗憾的是我不能使用面积图、样条曲线图或面积曲线图，因为它们都会弯曲线条并且在我看来让图表有点无聊。希望这可以解决一些问题。

谢谢大家的帮助

Answer 1

您可以在设置threshold: null 的条件下使用area 类型...这甚至适用于数据范围为3。 以下是包含您的数据的区域高图示例。

// create the chart
  Highcharts.stockChart('container', {

    title: {
      text: 'Platinum'
    },

    xAxis: {
      gapGridLineWidth: 0
    },

  rangeSelector : {
      buttons: [
        {
        type: 'all',
        count: 1,
        text: 'All'
        }
      ],
      selected: 1,
      inputEnabled: false
  },

    series: [{
      name: 'Price',
      type: 'area',
      data: [787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 787, 787, 786, 786, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 787, 786, 786, 786, 787, 787, 787, 788, 787, 787, 788, 788, 787, 787, 787, 787, 787, 787, 788, 787, 787, 787, 787, 787, 787, 786, 787, 786, 786, 786, 785, 785, 785, 785, 785, 785, 785, 785, 785, 785, 786, 785, 785, 785, 785, 784, 785, 785, 784, 785, 784, 784, 784, 785, 785, 785, 785, 785, 785, 785, 784],
      gapSize: 5,
      tooltip: {
        valueDecimals: 2
      },
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
      },
      threshold: null
    }]
  });

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>