如何在 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();

Answer 1

格式化程序属性需要嵌套在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) 中获得系列的默认值。您可以使用该参数并获取原始值而不是百分比。