Question

我正在尝试向高图添加类似于区域或区域图折线图的区域梯度。不幸的是，我不能使用它们，因为它们会使我的图表显得无趣，因为我的数据通常在大约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

您可以在设置area的情况下使用类型threshold: null ...即使在数据范围为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>

在行高图中添加面积梯度

1 个答案: