5

我正在为一个社会开发一个网站，我正在使用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();
4

1 回答 1

14

格式化程序属性需要嵌套在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();

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

于 2019-04-04T11:20:19.563 回答