apexcharts - ApexChart - 数字非常小的轴

Question

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

我试过了

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

...和...

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

...但两者都不起作用（第二个选项会使浏览器崩溃！）

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

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

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

还有什么我可以尝试的吗？

标签： apexcharts

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 示例