如何在apexcharts.js中仅返回饼图上的值而不转换百分比。

Question

我正在开发一个社团网站，使用了apexCharts.js。我想展示一个简单的饼图，但是当我显示时，datalabel上的值是一个百分比。我不想把它们转换成数值，当然，当我们悬停在饼图上时，真实值会显示出来。

我已经阅读了文档，并在datalabels选项中进行了搜索。我的想法是：

formatter: function(val) { return val }

但是它没有起作用......

所以我在Github和这里都没有找到解决这个问题的例子。

以下是我的脚本：

var options = {
  chart: {
    width: 650,
    type: 'pie',
  },
  labels: ['Date formation',
    'Date formation 1',
    'Date formation 2',
    'Date formation 3',
    'Nombre de jours restant ',
    'Nombre de formations restantes'
  ],
  series: [202, 80, 62, 250, 52, 30],
  /* this portion NEED custom ???? */
  formatter: function (val) {
    return val
  },
  title: {
    text: "Jours de formation produits ou plannifiés"
  },
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
      legend: {
        position: 'center'
      }
    }
  }]
}
var chart = new ApexCharts(
  document.querySelector("#chart"),
  options);
chart.render();

- Barth.M

Answer 1

formatter属性需要嵌套在dataLabels属性内。就像这样:

    var options = {
      chart: {
        width: 650,
        type: 'pie',
      },
      labels: ['Date formation',
        'Date formation 1',
        'Date formation 2',
        'Date formation 3',
        'Nombre de jours restant ',
        'Nombre de formations restantes'
      ],
      series: [202, 80, 62, 250, 52, 30],
      dataLabels: {
        formatter: function (val, opts) {
            return opts.w.config.series[opts.seriesIndex]
        },
      },
    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options);
    chart.render();

您可以在 formatter 函数的第二个参数（opts）中获取系列的默认值。 您可以使用该参数并获取原始值而不是百分比。

- junedchhipa

Answer 2

这很简单，这是代码-->

            options={{
              dataLabels: {
                formatter: function (val) {
                  const percent = (val/1);
                  return percent.toFixed(0)
                },
              },

- Samuel Murari