使用 ApexCharts 的圆角图表

Question

我在 GitHub 上看到这篇关于圆角条形图的文章 ( https://github.com/apexcharts/apexcharts.js/issues/422 )，想知道如何圆角我正在使用的版本 3.27.3 的图表底部。我希望我的图表看起来像这样： 香肠图 目前它们看起来像这个 条形图 正如你所看到的底部不是圆形的

这些是我的选择：

    chart: {
      background: "transparent",
      foreColor: "#333",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: false,
      },
    },
    legend: {
      show: false,
    },
    grid: {
      show: false,
    },
    xaxis: {
      categories: [],
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      labels: {
        show: false,
      },
    },
    yaxis: {
      labels: {
        style: {
          colors: ["#FFFFFF"],
          fontSize: "12px",
          fontFamily: "Helvetica, Arial, sans-serif",
          fontWeight: 500,
          cssClass: "apexcharts-yaxis-label",
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        borderRadius: 7,
        columnWidth: "25%",
        barHeight: "70%",
      },
    },
    fill: {
      colors: ["#FFFFFF"],
    },
    dataLabels: {
      enabled: false,
    },
    title: {
      text: undefined,
    },
  });

Answer 1

您需要在属性中添加属性borderRadius: 30（或您想要的数字）options

options: {
 plotOptions: {
  bar: {
   borderRadius: 30,
   // borderRadiusApplication: 'end',
   // borderRadiusWhenStacked: 'last',
  }
 }
}

您还可以使用borderRadiusApplication，所有这些属性都可以从版本及更高borderRadiusWhenStacked版本中使用3.26

您可以在这里找到更多信息https://apexcharts.com/docs/options/plotoptions/bar/