Apexcharts：如何强制条形图中的轴仅显示整数值？

Question

我正在使用 ApexCharts 中的条形图。水平 x 轴有项目数。当数字太低（例如 1、2）时，轴会显示没有意义的中间十进制值。如何强制轴仅以整数间隔显示整数值，如第二个图像中所示。 Vue 模板

        <apexchart
          ref="ratingChart"
          width="450"
          height="250"
          :options="ratingData.options"
          :series="ratingData.series"
        ></apexchart>

Javascript

data: function () {
    return {
      ratingData: {
        options: {
          chart: {
            id: "item-rating",
            type: "bar",
          },
          title: {
            text: "Item by Rating",
            align: "center",
            margin: 10,
            offsetX: 0,
            offsetY: 0,
            floating: false,
            style: {
              fontSize: "14px",
              fontWeight: "normal",
              fontFamily: "Arial",
              color: "#595959",
            },
          },
          noData: {
            text: "Loading...",
          },
          xaxis: {
            categories: ["Very High", "High", "Medium", "Low", "Eliminated"],
            type: "category",
            tickPlacement: "on",
            labels: {
              rotate: 0,
              rotateAlways: false,
            },
            decimalsInFloat: 0,
          },
          colors: ["#E53935", "#FFA726", "#FDD835", "#7CB342", "#29B6F6"],
          dataLabels: {
            enabled: true,
          },
          plotOptions: {
            bar: {
              distributed: true,
              borderRadius: 0,
              horizontal: true,
            },
          },
        },
        series: [
          {
            name: "itemCount",
            data: [10, 4, 8, 9, 3],
            //data: [1, 2, 2, 1, 3], // for low counts
          },
        ],
      },
    }
}

Answer 1

阅读它问题我可以在 Y 中只有整数值吗 。您应该将该选项附加到 xaxis

labels: {
  formatter: function (val) {
    return val.toFixed(0);
  }
},

这适用于 x 轴。对于你的情况：

xaxis: {
            categories: ["Very High", "High", "Medium", "Low", "Eliminated"],
            type: "category",
            tickPlacement: "on",
            labels: {
              rotate: 0,
              rotateAlways: false,
              formatter: function (val) {
                return val.toFixed(0);
              }
            },
            decimalsInFloat: 0,
          },

Answer 2

如果您想显示每个

y-axis

的

x-axis

值，您可以在图表选项中将

tickAmount

设置为

dataPoints

，如下所示：

xaxis: {
   tickAmount: "dataPoints",
},

您还可以将其设置为数字，如

1

，以仅显示没有小数的数字。

xaxis: {
   tickAmount: 1
},