有没有办法在顶点图表中的x轴前后添加空白？

Question

我需要找到一种方法在 Apex 图表中的图表前后添加一些空格。 目前我的图表显示在 0,0 并在最后一个数据点结束，请参见图片

..但我想要的是在第一个数据点之前添加空格，在最后一个数据点之后添加空格，请参阅图像

我看不到执行此操作的设置，我尝试过破解它但无济于事。任何帮助将不胜感激。

Answer 1

您可以使用网格选项向侧面添加填充

import ApexCharts from 'apexcharts'


var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999],
    
  },
  grid: {
    show: true,
    borderColor: '#90A4AE',
    strokeDashArray: 0,
    position: 'back',
    xaxis: {
        lines: {
            show: false
        }
    },   
    yaxis: {
        lines: {
            show: false
        }
    },  
    row: {
        colors: undefined,
        opacity: 0.5
    },  
    column: {
        colors: undefined,
        opacity: 0.5
    },  
    padding: {
        top: 0,
        right: 50,
        bottom: 0,
        left: 50
    },  
}
}

var chart = new ApexCharts(document.querySelector("#app"), options);

chart.render()

Answer 2

设置刻度线对我有用。

x轴：{ tickPlacement: '之间', }