Highcharts 区域样条线：边到边的线和隐藏第一个y标签

我收到了一个使用areaspline的图形模型（忽略柱状图）：

我有两个问题，我似乎找不到任何能够满足需求的配置

有没有一种方法可以根据它们的趋势斜率，或者可能只是稍微高于或低于端点，将线延伸到图形的边缘？在这样的图上，省略这些边线看起来不错，但在同一区域中只有3个数据点的图上，空白更为明显

我让y轴标签每隔一步移动一次，但在这种情况下，我似乎找不到隐藏第一个标签（$0）的方法。除了隐藏文本元素本身，是否有这样的配置

编辑：以下是我的配置示例：

var themeColors = {
    primaryColor: '#067bc2',    //dark blue
    secondaryColor: '#6a61a7',  //dark purple
    tertiaryColor: '#5ccadc',   //turquoise
    darkGray: '#37383e',        //dark gray
    mediumGray: '#919aa2',      //medium gray
    mediumLightGray: '#c9d3dc', //medium blue gray
    lightGray: '#eaf1f8',       //light blue gray (hover color)
    primaryRed: '#e54443',
    secondaryRed: '#e54443',
    primaryGreen: '#2bbb2d',
    secondaryGreen: '#2bbb2d',
    primaryOrange: '#ffa883',   //peach
    primaryBackground: '#fafcfe',//light blue
    secondaryBackground: '#ffffff',
    primaryText: '#37383e',     //dark gray
    secondaryText: '#919aa2',   //medium gray
    selectedColor: '#f5fafd'    //light blue, slightly darker than background
};

var colors = [
  themeColors.secondaryColor,
  themeColors.tertiaryColor,
  themeColors.primaryOrange
];

(function renderChart(series) {
  var options = {
    chart: {
      height: 400,
      spacing: [0,0,0,0],
      type: 'areaspline',
    },
    colors: colors,
    credits: { enabled: false },
    legend: {
      align: 'left',
      itemStyle: {
        color: themeColors.secondaryText,
        fontSize: '12px',
        fontWeight: 'normal',
      },
      margin: 30,
      symbolHeight: 14,
      symbolRadius: 0,
      symbolWidth: 14,
    },
    plotOptions: {
      areaspline: {
        marker: {
          fillColor: themeColors.secondaryBackground,
          lineColor: null,
          lineWidth: 2,
          radius: 3,
          symbol: 'circle',
        }
      }
    },
    title: { text: null },
    xAxis: {
      categories: ['first', 'second', 'third'],
      crosshair: {
        color: Highcharts.color(themeColors.lightGray).setOpacity(.5).get('rgba'),
        width: 12
      },
      labels: {
        style: {
          color: themeColors.secondaryText,
          fontSize: '12px'
        }
      },
      lineColor: themeColors.lightGray,
      tickColor: themeColors.lightGray,
      tickWidth: 0,
    },
    yAxis: {
      gridLineColor: themeColors.lightGray,
      labels: {
        align: 'left',
        step: 2,
        style: {
          color: themeColors.secondaryText,
          fontSize: '12px'
        },
        x: 0,
        y: 12,
      },
      lineColor: themeColors.lightGray,
      tickColor: themeColors.lightGray,
      title: { text: null },
    },
  };

  series.forEach((s,i)=>{
    s.fillColor = {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, Highcharts.color(colors[i]).setOpacity(0.1).get('rgba')],
        [1, Highcharts.color(colors[i]).setOpacity(0).get('rgba')]
      ]
    };
  });

  options.series = series;

    Highcharts.chart('container',options);
})([
    { name: 'a', data:[1,4,2] },
  { name: 'b', data:[3,1,2] }
]);

jsFiddle：

谢谢

可以设置轴的最小值和最大值

xAxis: {
  categories: ['first', 'second', 'third'],
  min: 0.5,
  max: 1.5,

如果有3个类别，则轴范围将为0-2，因此可以将最小值增加，将最大值减少0.5（类别中间）

您还可以通过在图表加载时更新xAxis来动态完成此操作

    chart: {
      events: {
        load: function () {
          const min = Math.min.apply(null, this.series[0].xData)
          const max = Math.max.apply(null, this.series[0].xData)

          this.xAxis[0].update({
            min: min + 0.5,
            max: max - 0.5
          })
        }
      }
    },

也可以在渲染图表之前执行此操作

设置为false

---

示例：

你能和大家分享一个到目前为止你所尝试过的实例吗？@Core972更新的问题-jsfiddle在底部谢谢-因为#1，我已经研究过这个选项，但我想知道是否有可能让一些东西与模型更紧密地匹配-即点和标签仍然间隔开，但是让额外的线延伸，使点仍然可见。我认为唯一的方法是在左侧和右侧定义两个额外的点-海图需要知道在哪里放置点来绘制线。这些点必须根据数据进行计算。使用两个附加点，扩展类别，使其具有两个空类别[“”，“‘第一’，…，‘最后’，“”]，并调整最小值和最大值。