javascript - 容器内没有填充的 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

最好的问候!