x轴的Javascript Apexchart标题总是在错误的位置答案

【问题标题】：Javascript Apexchart title of x axis always in the wrong positionx轴的Javascript Apexchart标题总是在错误的位置
【发布时间】：2022-12-30 04:59:42
【问题描述】：

我在柱形图中 x 轴的标题定位有一些问题。根据 y 值的范围，标题总是在不同的位置，如示例所示：

Example 1

Example 2

这是我的代码：

  var options = {
    chart: {
      type: 'bar'
    },
    series: [{
      name: 'Elevation',
      data: dict["values"],
      color: "#e0bf51"
    }],
    xaxis: {
      title: {
        text: 'Elevation (m)',
          //  offsetY: +120,
            floating: true,
      },
        categories: newkeys,
        tickAmount: 10,
        
    },
    dataLabels: {
        enabled: false
    },
    yaxis: {
      title: {
        text: 'Percentage (%)',
        offsetX:  10,
        floating: true,
      },
      axisBorder: {
        show: true
      },
      labels: {
        show: false,
        formatter: function (val) {
          return val + "%"; 
        }
      }
    },
    stroke: {
      colors: ["transparent"],
      width: 2
    },
    plotOptions: {
      bar: {
        columnWidth: "100%",
        rangeBarOverlap: true,
        rangeBarGroupRows: false
      }
    },
    tooltip: {
      x: {
        formatter: (value) => { return String(value) + '-' + String((parseInt(value)+9)) + " m" },
    },
    y: {
      title: {
          formatter: (seriesName) => "Percentage of land:",
      },
  },
  }
  }
  
  var chart = new ApexCharts(document.getElementById(elementId), options);
  
  chart.render();

我尝试更改偏移值，但由于标题始终处于新位置，因此这种方法不起作用。

【问题讨论】：

标签： javascript vue.js plot graph apexcharts

【解决方案1】：

这并不理想，但你可以降级有点版本顶点图表.

这个错误出现在v3.36.1, 所以它不在v3.36.0.

let options = {
  series: [{
    name: 'Series',
    data: [10, 20, 15]
  }],
  chart: {
    type: 'bar',
    height: 350
  },
  dataLabels: {
    enabled: false
  },
  xaxis: {
    categories: ['Category 1', 'Category 2', 'Category 3'],
    title: {
      text: 'Axis title'
    }
  }
};

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

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0"></script>

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

【讨论】：