没有填充容器内的Highchart

Question

是否可以使用没有左右填充的折线图？这条线是边缘到边缘，就像设计一样？

目前它看起来像那样

chartOptions: {
chart: {
  type: 'spline',
  spacingBottom: 0,
},
title: null,
legend: {
  enabled: false
},
credits: {
  enabled: false,
},
tooltip: {
  split: true,
  pointFormat: '{point.y} {series.name}',
},
plotOptions: {
  series: {
    shadow: true,
  },
},
xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  minPadding: 0,
  maxPadding: 0,
  tickWidth: 0,
  lineWidth: 0,
  crosshair: true,
},
yAxis: {
  visible: false,
},
series: [
  {
    name: 'Bookings',
    data: [43, 44, 43, 42, 42, 41, 42, 43, 45, 44, 42, 43],
  },
  {
    name: 'EUR',
    data: [143, 144, 143, 142, 142, 141, 142, 143, 145, 144, 142, 143],
  },
],

}，

Answer 1

是的，可以通过添加“xAxis”配置对象，参数“min”和“max”来确定轴的最小值和最大值。但是，在您的情况下并不完全如此，因为此图表中没有足够的数据（您没有在1月之前和12月之后指定数据，因此图表有起点和终点）。

以下是基于您的配置代码：

xAxis: {
    categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug', 'Sep', 'Oct', 'Nov', 'Dec', ''],
    minPadding: 0,
    maxPadding: 0,
    tickWidth: 0,
    lineWidth: 0,
    crosshair: true,
    min: 1,
    max: 12
},

series: [
    {
     name: 'Bookings',
     data: [39, 43, 44, 43, 42, 42, 41, 42, 43, 45, 44, 42, 43, 48],
    },
    {
     name: 'EUR',
     data: [141, 143, 144, 143, 142, 142, 141, 142, 143, 145, 144, 142, 143, 148],
    },
],

我又添加了两个类别（一个在'Jan'之前，一个在'Dec'之后），还有两个系列对象的数据位置。由于设置了最小和最大参数，因此图表仅显示此点之间的范围。

最后，你应该像这样设置间距：

chart: {
    type: 'spline',
    spacing: [0,0,10,0]
},  

让我们看看下面的实时工作： JSFiddle

祝你好运！