如何让Highcharts样条曲线延伸至数据点以外区域？

问题 #

我正在开发Highcharts样条图表，希望样条曲线从第一个数据点左侧开始，延伸至最后一个数据点右侧，而且延伸部分要保持曲线连续。但目前生成的样条只从第一个数据点开始，到最后一个数据点就结束了，该怎么配置？

解决方法 #

直接用Highcharts自带的extendToStart和extendToEnd配置项就行，这俩参数就是用来控制样条曲线是否向数据点前后延伸，还能保证曲线平滑连续。

具体配置

1. 在plotOptions.spline里加extendToStart: true，让曲线从第一个数据点左边延伸到x轴起点
2. 再加extendToEnd: true，让曲线从最后一个数据点右边延伸到x轴终点
3. 要是觉得延伸长度不合适，可以配合xAxis.minPadding和xAxis.maxPadding调整轴的留白，把延伸效果调到你想要的样子

修改后的完整代码

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'spline',
    styledMode: true
  },
  title: {
    text: 'Styling data labels by CSS'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr'],
    // 可选：调整轴的留白，控制延伸部分的长度
    minPadding: 0.1,
    maxPadding: 0.1
  },
  plotOptions: {
    spline: {
      // 开启向左延伸
      extendToStart: true,
      // 开启向右延伸
      extendToEnd: true,
      dataLabels: {
        enabled: true,
        borderRadius: 2,
        y: -10,
        shape: 'callout'
      }
    }
  },
  series: [{
    data: [500, 400, 500, 400]
  }]
});

CSS（无改动）

@import "https://code.highcharts.com/css/highcharts.css";
#container {
  height: 400px;
  min-width: 300px;
  max-width: 800px;
  margin: 0 auto;
}

.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: red;
  stroke-width: 2px;
  stroke: black;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: white;
}

HTML（无改动）

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

额外说明

• extendToStart和extendToEnd只对spline类型图表生效，它们会自动根据相邻数据点的趋势计算延伸曲线的形状，保证连续性
• 要是需要更精准控制延伸终点，也可以手动加虚拟数据点：在现有数据前后添加上和相邻点趋势一致的点，再设置xAxis.min和xAxis.max覆盖这些虚拟点的范围，必要时开启connectNulls: true

内容的提问来源于stack exchange，提问作者deepak_k_0001