从 javascript apexcharts 图中删除填充答案

【问题标题】：Remove padding from javascript apexcharts graph从 javascript apexcharts 图中删除填充
【发布时间】：2023-01-08 22:28:33
【问题描述】：

我正在寻找从时间轴 apexcharts 图表中删除填充。

【问题讨论】：

标签： javascript apexcharts

【解决方案1】：

您只需要在plotOptions 中设置一个 100% 的条形高度：

let options = {
  series: [
    {
      name: 'Bob',
      data: [
        {
          x: 'Design',
          y: [
            new Date('2019-03-05').getTime(),
            new Date('2019-03-08').getTime()
          ]
        },
        {
          x: 'Code',
          y: [
            new Date('2019-03-08').getTime(),
            new Date('2019-03-11').getTime()
          ]
        },
        {
          x: 'Test',
          y: [
            new Date('2019-03-11').getTime(),
            new Date('2019-03-16').getTime()
          ]
        }
      ]
    },
    {
      name: 'Joe',
      data: [
        {
          x: 'Design',
          y: [
            new Date('2019-03-02').getTime(),
            new Date('2019-03-05').getTime()
          ]
        },
        {
          x: 'Code',
          y: [
            new Date('2019-03-06').getTime(),
            new Date('2019-03-09').getTime()
          ]
        },
        {
          x: 'Test',
          y: [
            new Date('2019-03-10').getTime(),
            new Date('2019-03-19').getTime()
          ]
        }
      ]
    }
  ],
  chart: {
    height: 350,
    type: 'rangeBar'
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '100%' // <--- HERE
    }
  },
  dataLabels: {
    enabled: true,
    formatter: val => {
      let a = moment(val[0]),
          b = moment(val[1]),
          diff = b.diff(a, 'days');
          
      return diff + (diff > 1 ? ' days' : ' day');
    }
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'light',
      type: 'vertical',
      shadeIntensity: 0.25,
      gradientToColors: undefined,
      inverseColors: true,
      opacityFrom: 1,
      opacityTo: 1,
      stops: [50, 0, 100, 100]
    }
  },
  xaxis: {
    type: 'datetime'
  },
  legend: {
    position: 'top'
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>

<div id="chart"></div>

见bar – ApexCharts.js。

【讨论】：