样条线非常弯曲，如何使其平滑？

Question

需要一条更平滑的线（该线应平滑且均匀地上升），但值不应更改。是否可以在不更改值的情况下建立更直线的线？屏幕说明：http://prntscr.com/qudf96和我的代码：

<script>
function reDrawCalc(gdata, gcurr, nums = 2) {
    Highcharts.chart('container', {
        chart: {
            height: 400,
            type: 'area',
            margin: [20, 0, 20, 0]
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },

      exporting: {
        enabled: false
      },
        xAxis: {
            gridLineWidth: 1,
            categories: ['One', 'Two', 'Three', 'Four', 'Five']
        },
        yAxis: {
            gridLineWidth: 0,
        },
        tooltip: {
              enabled: false,
            crosshairs: true
        },
        plotOptions: {
          series: {
            dataLabels: { 
              enabled: true, 
              useHTML: true,
              inside: false,
              style: {
                fontFamily: 'Rubik, sans-serif',
                textTransform: 'uppercase',
                fontSize: 'none',
                fontWeight: 'normal',
                textShadow: 'none'
              },
              formatter: function() {
                return '<div class="chitem-time">'+ this.x+'</div>'
                      +'<div class="chitem-val">'+ Highcharts.numberFormat(this.y,nums)+'<sup>'+gcurr+'</sup></div>';
              }
            }
          }
        },

        series: [{
            type: 'areaspline',
            data: gdata,
            lineWidth: 5,
            color: '#f0c997',
            fillColor:'transparent'
        }],
    responsive: {  
  rules: [{  
    condition: {  
      maxWidth: 500  
    },  
    chartOptions: {
            chart: {
            height: 350,
            type: 'area',
            margin: [20, 0, 20, 0]
        },
      series: [{
            type: 'areaspline',
            data: gdata,
            lineWidth: 3,
            color: '#f0c997',
            fillColor:'transparent'
        }],
    }  
  }]  
}
    });
}
</script>

可以这样做吗？以及如何修改我的代码？预先非常感谢！

Answer 1

正如我在评论中提到的，当前的线形是因为图表上的点位置。如果您不需要保留点的实际位置，则可以使用的解决方案是使用虚拟数据作为点，并在dataLabels中使用正确的点。参见：

演示：https://jsfiddle.net/BlackLabel/fshx3n50/

data: [{
  y: 5,
  z: 0.20
}, {
  y: 10,
  z: 1.40
}, {
  y: 18,
  z: 6.20
}, {
  y: 30,
  z: 18.00
}, {
  y: 50,
  z: 73.00
}],

我还更改了格式化程序功能以在dataLabel中显示z值：

formatter: function() {
  return '<div class="chitem-time">' + this.x + '</div>' +
    '<div class="chitem-val">' + Highcharts.numberFormat(this.point.z) + '<sup>REM</sup></div>';
}