没有填充容器内的Highchart

是否有可能没有左右填充的折线图？这条线是边缘到边缘,就像在设计中一样？

目前它看起来像那样

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],
  },
],

},

是的,可以通过添加"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],
    },
],

我增加了两个类别(一个"扬"之前和一个"月"后),并为这两个系列的至少两个对象更多的数据位.由于设置了最小和最大参数,因此图表仅显示此点之间的范围.

最后,你应该像这样设置间距:

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

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

最好的祝福!