ApexChart-轴非常小

Question

我正在尝试生成一个处理非常小的数字的图表。但是，ApexCharts上的x轴（实际上是y轴，是水平堆叠的条形图）仅显示零，这具有隐藏某些数据条的作用。

我尝试过

yaxis: {
 type: 'numeric',
 tickAmount: 50
},

...和...

yaxis: {
 type: 'numeric',
 tickAmount: 'dataPoints'
},

...但均无效（第二个选项使浏览器崩溃！）

一个非常基本的示例，根本没有太多数据：

https://codepen.io/anon/pen/JxojwZ

如果您在日期之间进行切换（使用底部的日期选项，则会看到默认情况下不会（但应该显示）的额外数据。

我还能尝试其他什么吗？

Answer 1

您正在使用旧版本的ApexCharts（2.2.4）。 建议您使用此CDN链接-https://cdn.jsdelivr.net/npm/apexcharts

将其替换为最新版本。

这是图表的更新配置

var options = {
  chart: {
    type: "bar",
    stacked: true,
    height: 300
  },
  plotOptions: {
    bar: {
      barHeight: "90%",
      distributed: true,
      horizontal: true
    }
  },
  stroke: {
    width: 1,
    colors: ["#fff"]
  },
  series: [
    {
      name: "Monday 7th January 2019",
      data: [0.02, 0.01, 0.01]
    },
    {
      name: "Tuesday 8th January 2019",
      data: [0.02, 0.01, 0.01]
    },
    {
      name: "Wednesday 9th January 2019",
      data: [0.01, 0.02, 0.0]
    }
  ],
  xaxis: {
    categories: ["England", "Scotland", "Wales"],
    title: {
      text: "Average"
    },
    labels: {
      formatter: function(val) {
        return val;
      }
    }
  },
  dataLabels: {
    enabled: false
  },
  yaxis: {},
  tooltip: {
    theme: "light",
    x: {
      show: true
    }
  }
};
var chart = new ApexCharts(document.querySelector("#statChart"), options);
chart.render();

产生此结果

工作CodePen example